このブログにもそろそろシンタックスハイライター（syntax highlighter）を導入しようと思って調べてみたら、なんか思ってたより種類があってげっそりです。いろいろあってドキュメント見るだけではよくわからなかったのでとりあえず一通り試してみました。シンタックスハイライターライブラリをお探しの方の参考になれば嬉しいです。
今回対象とするシンタックスハイライターは、code-prettify、syntaxhighlighter、highlight.js、Prism、EnlighterJS の5つです。検索して見つけられたのがこの5つだったんですが、他にもあるぞという情報をお持ちの方はぜひご連絡ください。
code-prettify
google/code-prettify – GitHub
デモページ
なんとあの天下のGoogleが作ったという信頼と実績のシンタックスハイライターです。機能は必要最低限といったところで、ハイライトと行番号の表示/非表示の切り替えくらい。50弱の言語に対応しているので特に困ることもないでしょう。
jsファイル単体では15.4KBと、他と比べると若干大きめですが誤差の範囲でしょう。
公式テーマ数が5つと若干少ないのがおしいですが、独自にテーマを作ることもできるのである程度CSSがいじれる方なら特に問題はないと思います。CDNに登録されているスクリプトはどうもデフォルトのテーマが自動的に適応されるみたいなので、独自テーマを使用したい方はGitHubからprettify-small.zipを取得してその中のjsファイルを使いましょう。
syntaxhighlighter
syntaxhighlighter/syntaxhighlighter – GitHub
ビルドが必要らしいのでやってみましたが途中でエラーが出て断念しました。最後のコミットが2017年の4月で、いたるところに寄付の呼びかけがあるので今後の更新ももしかしたらないかもしれません。
hightlight.js
ダウンロードページを見てもらえば分かりますが無茶苦茶な数の言語に対応しています。必要な言語だけ選んで使うということができるのでファイルサイズが大きくなりすぎる心配もありません。
ちなみにHTML、CSS、JavaScriptのみの場合は約11.5KBでした。
さらに79の公式テーマがあるのでまず不自由しないでしょう。
ただし行番号表示がありません。これは作成者のポリシーらしいので今後も実装されることはないようです。
Prism
こちらも約150種類と多くの言語に対応しており、必要な言語だけ選んで使用できます。
Prismの最大の特徴はなんといっても拡張性で、多数のプラグインが公開されてます。例えば、行番号表示、行強調、タブや改行の可視化、オートリンク、色などのプレビュー表示などなど。独自のプラグインも作成できるようなので、腕に自信のある方は作ってみるのもいいでしょう。
ちなみにHTML、CSS、JavaScriptのみの場合は約11.9KBでした。
ただテーマがちょっとアレげなのが多いのがちょっと惜しいですね。
EnlighterJS
MooToolsというライブラリに依存しているため一番重いです。（MooToolsだけで101KBある）対応言語は約30種類とこれまた一番少なめ。
なんかいいとこ無しのように見えますが、テーマは EnlighterJS が一番イカしてます。16種類のテーマがありますがどれも見応えのあるテーマです。テーマを理由にEnlighterJSを選ぶのも全然アリでしょう。
もう一つ EnlighterJS の特徴として、タブ表示があげられます。これは他のシンタックスハイライターにはないですね。HTMLとCSSなど、ソースを一緒に表示したいケースでは重宝すると思います。
おわり
デモページを見ればわかると思いますがハイライトにも結構クセがありますね。そこらへんは実際に使ってみて決めるのが一番かもしれません。
ところで highlight.js と Prism が Brainfuck にも対応してるのが面白いですね。ハイライトしたところで誰も読まなくね？っていう。
