BloggerにSyntaxHighlighterを導入する!

SyntaxHighlighter v3は導入できなかったが、最新のSyntaxHighlighter v4を導入できたので、その方法を紹介したいと思う.
SyntaxHighlighterを導入できずに諦めている人にぜひ読んでもらい、私と同じ喜びを感じてほしいと思う.

導入する！

その0

Git Bash(Windowsの場合)とNode.js(LTSのほうが良い?)をインストールする.

その1

Git Bushを起動して、syntaxhighlighterを保存するローカルディレクトリに移動し、以下のコードを続けて入力する.

$ git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
$ cd syntaxhighlighter
$ npm install

次のような感じ

その2

続いて、以下のコードを入力する.

ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master)
$ ./node_modules/gulp/bin/gulp.js setup-project

そのまま通れば(その3へ)問題ないが、次のエラーが出るかもしれない.(私の場合はこうなった.)

[hh:mm:ss] TypeError: loadReposFromCache(...).error is not a function

この時は、 /syntaxhighlighter/build/setup-project.js を開いて、39行の error を catch に変える.
つまり、39行目を次のようにして上書き保存する.

const loadRepos = () => loadReposFromCache().catch(loadReposFromGitHub).then(R.map(R.pick(['clone_url', 'name'])));

そして、Git Bashで、その2の初めのコードを再び入力する(うまくいくはず).

無事成功すると、 /syntaxhighlighter/repos/ 下に新たなファイルフォルダーがダウンロードされる.

その3

次に、 ./node_modules/gulp/bin/gulp.js build を使う.

この時に、 --brushes と --theme を指定する.

--brushes

Xという言語をハイライトさせたいのなら、 --brushes=X という風にする.

コンマで区切ることで複数指定することもできる: --brushes=X,Y

どの言語が対応しているかは、 /syntaxhighlighter/repos/ 下にある brush-X という名前のフォルダーを探せばわかる(Xには、具体的な言語が入る、javascriptとか).

また、 --brushes=all とすれば、 /syntaxhighlighter/repos/ 下にある言語すべてをハイライトできる.

--theme

Xというテーマを使いたかったら、 --theme=X という風に指定する。

使用できるテーマは、以下のサイトに載ってる(多分).

SyntaxHighlighter 3.0.83 Themes

次のサイトは、画像もあって役に立つ.

テーマ毎のソースコード表示例

/syntaxhighlighter/repos/ 下にあるフォルダー theme-X を探してもらえば、対応しているテーマが分かる.

使用例

例えば、javascriptとcssをハイライトさせたくて、テーマはdefaultにしたい場合、Git Bashに次のように入力する.

ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master)
$ ./node_modules/gulp/bin/gulp.js build --brushes=javascript,css --theme=default

これが通れば問題ないので、その6まで行ってほしいが、次のエラーが出るかもしれない. 多分出る.

[hh:mm:ss] TypeError: Promise.props is not a function

その4

/syntaxhighlighter/build/bundle.js を開いて、33行目の 'songbird' を 'bluebird' に変えて、上書き保存する.

  const Promise = require('bluebird');

そして、再び ./node_modules/gulp/bin/gulp.js build --brushes=javascript,css --theme=defaultを走らせる.

上の画像のように、次のようなエラーが発生すると思う(もし、うまくいったらその6まで飛んでもらいたい).

ERROR in ./src/core.js
Module not found: Error: Cannot resolve module 'brush-javascript' in C:\Users\ko-ika\Blogger\syntaxhighlighter\src
 @ ./src/core.js 241:14-41

その5

上のエラー中の、Module not found: Error: Cannot resolve module 後の2つの'で囲まれたファイルフォルダーを手動でインストールする.

ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master)
$ npm install folder-name

上の例では、以下のようにする.

ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master)
$ npm install brush-javascript

ko-ika@PC MINGW64 ~/Blogger/syntaxhighlighter (master)
$ npm install brush-css

そして、 ./node_modules/gulp/bin/gulp.js buildを走らせる.

特にエラーは出ないで、終了すると思う.

もし、うまくいかなかったら、次も試してみる.

npm install opts-parser
npm install syntaxhighlighter-match
npm install syntaxhighlighter-html-renderer
npm install syntaxhighlighter-regex

その6

syntaxhighlighter/dist ディレクトリ下にいくつかのファイルが生成されているが、その中の、 syntaxhighlighter.js と theme.css を各自のサーバーにアップロードする。

あとは、ブログのHTMLをいじるだけ(ここから先は、こちらの記事のその2と似ている).

Boggerのトップページのサイドメニューの「レイアウト」をクリックし、「HTML編集」ボタンを押す.

</head>タグの上に以下のコードを挿入する.

<script src='[path]/syntaxhighlighter.js' type='text/javascript'/>
<link href='[path]/theme.css' rel='stylesheet' type='text/css'/>

コード中の[path]は、syntaxhighlighter.jsと、theme.cssをアップロードしたフォルダー名を指定する. 同じフォルダーでなくてもよい. 例えば、https://foo.com/styles/theme.css、https://foo.com/scripts/syntaxhighlighter.jsなど.

そして、「テーマを保存」ボタンを押すだけ.

使用方法・注意点

使い方は、基本的に前のバージョンのSyntaxHighlighterとかわらないっぽいので、他のサイトを見てもらいたい.

一つだけ注意することは、この方法で導入したハイライターにはデフォルトでツールバーが表示されないことだ.

参考にしたサイト

SyntaxHighlighter v4

Building

Building: loadReposFromCache(...).error is not a function #428

gulp build fails - Cannot resolve module #407