SyntaxHighlighter v4

2017-06-02 開発

SyntaxHighlighter は文字通りシンタックスハイライトをするためのライブラリで、Wordpress で（おそらくよく使われる）プラグインの SyntaxHighlighter Evolved などにも用いられています。

前の v3 以前はウェブサイトから zip でダウンロードする形態だったようですが、2016 年あたりから最新版が v4 となるとともにダウンロードページが GitHub に移行し、自分でソースからビルドするようになっています。

この記事は v4.0.1 （時点でリポジトリから clone したのでリリースから少し進んだコミット 37724fdb）での情報です。

公式ページ: SyntaxHighlighter

GitHub: syntaxhighlighter/syntaxhighlighter: SyntaxHighlighter

Node.js

Node.js が必要なので、これを準備します。どうも apt-get のリポジトリから入れると「バージョンが古い」だとか「コマンドが node ではなく nodejs になって不便」という書き込みが見られました。

パッケージマネージャを利用した Node.js のインストール | Node.js

とりあえず公式にあるようにセットしていきます。

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

を実行すると

sudo apt-get install nodejs

をするように言われるのでその通りそのまま実行します。これで特に問題なく node で実行できるようになりました。

Build

GitHub の build のページにあるように、そのまま実行していきます。

git clone https://github.com/syntaxhighlighter/syntaxhighlighter.git
cd syntaxhighlighter
npm install
./node_modules/gulp/bin/gulp.js setup-project

これでビルドする準備が整ったのでビルドします。よく読むと

Note that the options –brushes and –theme do not have default values.

とのことで一番大事なこのオプションを指定しないと css が何も出てきません。最初ミスりました。

./node_modules/gulp/bin/gulp.js build --brushes=all --theme=default

とすれば一通り集まったファイルが ./dist フォルダに出てきます。

「一言語あたり一ファイル」だった v3 以前と違い、全部の設定が一つにまとまっているのでリクエスト数も少なくて済みそうです。

WordPress に設置

./dist に出力されたファイルを子テーマ内に入れて、

<script src="<!--?php echo get_stylesheet_directory_uri(); ?-->/syntaxhighlighter.js">
<link type="text/css" rel="stylesheet" href="<!--?php echo get_stylesheet_directory_uri(); ?-->/theme.css">

を追加して読み込むようにします。get_stylesheet_directory_uri() で子テーマのフォルダが、get_theme_directory_uri() では親テーマのアドレスが得られます。

ソースマップファイル

syntaxhighlighter.js.map はソースマップでデバッグに使うファイルですから、これはアップロードする必要性はないかと思います。しかし、デフォルトではこれを読みに行ってしまうため、ファイルが存在しないと 404 エラーになってしまうので気持ちが悪いですし、無駄なリクエストも発生しています。

これは、syntaxhilighter.js の最後にある

//# sourceMappingURL=syntaxhighlighter.js.map

を削除することでソースマップを読み込まなくなります。

おわり

あとは使いたいときにテキストモードで <pre class="brush: bash; html-script: true;"> とか書くだけ。

気づいたこと

<> で囲まれた要素を記述した場合、$lt; > でエスケープせずそのまま書いてもちゃんと表示してくれますが、完全に読み込まれるまでは <> で囲まれたものはそのまま HTML タグとして解釈されてしまいます。そのため、例えば（丁度上にある link のように）別のファイルを読み込むようなタグを記述した場合変なアドレスにアクセスしに行ってしまうようなので注意が必要そうです。

また、同様の原因で WordPress のビジュアルモードでは HTML タグをそのまま書いた場合中身をタグとして解釈した結果を表示してしまうようで、たまに書いた内容が変わってしまいます。

そのため、HTML タグを記述するときにエスケープしなくても正しく表示されはしますが、少なくとも括弧のどちらか片方をエスケープしておくなどを方が良さそうな感じです。