BloggerでソースコードをSyntaxHighlighterでカッコよく表示する

いままでGist使ったり、自分でhtml書いたりしていたのですが、文明の利器を利用することにしました。

ぐぐってみるとSyntaxHighlighterというすばらしいものが見つかりました。
日本語でみつけた記事とGitHubに書いてあることがどうも違っていて、バージョン3とバージョン4で大きく違うようです。私が試行錯誤した点などを記しておきます。
私がみつけた記事の大半はバージョン3以前の話だとおもいます。
ここではバージョン4の話を書いています。

最初に結論を言っておくと、Buildingをしっかり読めば全部必要なことは書いてあります。
英語を適当に読むと私と同じようになんかいろいろ試行錯誤する羽目になります。

私はmacOS High Sierraを使っています。
Node.jsとPython(2系)が必要です。
※ターミナルでpython -Vをタイプしたときに、2系がかえってくるようになっている必要があります。私はpyenvで3系をインストールしていてpython -Vが3系を返すようになっていました。いままで自分でPythonをインストールしたことがない方の場合はMacには2系があらかじめインストールされていますので気にする必要はありません。



他にも実は事前に必要なものがあるのかもしれません。
私のHomebrewの一覧を公開しておきます。
pyenv local systemはPythonを2系にするための設定です。不要な方には不要な手順です。
次のnpm installでエラーがでて気づきました。
私がはまったのは、buildの前にsetup-projectをしていなかったこと　⇒　これをしないと必要なものがダウンロードされずbuildで失敗します。
buildの際には--brushesと--themeの指定が必須のようですが指定していなかったこと　⇒ 特にエラーのようなものは出ずなんとなくファイルができていたのでいろいろいったりきたりしました。
成功すると./dist配下にファイルができています。
index.htmlはサンプルです。ブラウザで開いてみてください。

必要なものはsyntaxhighlighter.jsとtheme.cssです。
Bloggerの場合、[テーマ] - [HTMLの編集]で、</head>の直前にでもsyntaxhighlighter.jsとtheme.cssの読み込みを追加します。

  <script type="text/javascript" src="https://your-host.com/syntaxhighlighter.js"></script>
  <link type="text/css" rel="stylesheet" href="https://your-host.com/theme.css"/>
</head>

Bloggerを書くときには、HTMLのところで以下のような感じ書いていくとよいです。

<script class="brush: ruby" type="text/syntaxhighlighter"><![CDATA[
# ここにソースを書く
puts 'Hello, World'
]]></script>

最後にsyntaxhighlighter.jsとtheme.cssをどこに置いたらよいかということ(上ではyour-host.comと書いているところ)ですが、私はFirebase Hostingにおいています。
私のブログくらいのアクセス数なら無料で使えます苦笑