[SyntaxHighlight] Google Code PrettifyからPrism.jsに変更した時に気をつけたこと
ブログで使用しているコードのシンタックスハイライトをGoogle Code PrettifyからPrism.jsに乗り換えた。
概要
長年、Google Code Prettify を使用していたが、ライブラリの更新頻度の低下やハイライト可能な言語のバリエーションが少ない事に不満があった。
ただ、別のライブラリに乗り換えるにしても jQuery に依存したものは避け、さまざまなライブラリを探していた。
条件としては、以下のような形で探した。
- 更新頻度がそこそこある(放置されていない)
- ハイライト可能な言語のバリエーションが豊富
- 他ライブラリに依存しない(今回は jQuery)
- Google Code Prettify から乗換易い
Prismが、条件に一致したため採用した。
Google Code Prettify
Bootstrap の公式ドキュメントなどでも使用され、様々なサイトで見る機会も多い。しかしながら、ここしばらくは更新頻度が下がり、更新履歴を見るに、現在のところ 2013 年が実質的な最後の更新のようである。
配布
公式ページはこちら (Google Code から Github へ移動になった)
テーマ
非公式だが、テーマの配布はこちら
Prism
公式ページはこちら
Mozilla Developer Network: MDNなどでも使用実績がある模様。
Prism に決めたポイントとしては、(Google Code Prettify からの乗り換えのしやすさを除けば) サポート言語の豊富さに加えて、さらにプラグインが充実していることがある。(個人的にはプラグインはさほど重要ではないが、今後使用する可能性を考えると魅力的ではある)
配布
公式ページからカスタムビルドが可能。好きな言語やテーマ・プラグインを選択すると、JS と CSS がそれぞれダウンロードできる。
また、GitHubやnpmから取得する事もできる。
サポート言語
Supported languagesにサポート言語の一覧がある。
定番の C 系, Java, JavaScriptから、SassやScssなど細かな指定にも対応している。
ちなみに HTML を指定したい場合は、markupを指定する必要がある。
テーマ
現在、テーマは以下の 6 種類。
- Default
- Dark
- Funky
- Okaidia
- Twilight
- Coy
公式のテーマ以外にも自作や非公式なテーマの適応も可能。
プラグイン
現在、プラグインは以下の 18 個。
- Line Highlight
- Line Numbers
- Show Invisibles
- Autolinker
- WebPlatform Docs
- File Highlight
- Show Language
- JSONP Highlight
- Highlight Keywords
- Remove initial line feed
- Previewer: Base
- Previewer: Color
- Previewer: Gradient
- Previewer: Easing
- Previewer: Time
- Previewer: Angle
- Autoloader
- Keep Markup
colorやeasingのプレビューから、ライブラリのautoloaderまで用途は様々。
Google Code Prettify から Prism に乗り換え
両者とも事前にライブラリを読み込んだ上で、それぞれ以下のような記述でコードをハイライトさせる。
Google Code Prettify の記述方法
<pre class="prettyprint lang-javascript">
コード
</pre>
Prism の記述方法
<pre class="language-javascript"><code>
コード
</code></pre>
ライブラリとテーマを除けば、違いといえばlang-*かlanguage-*の差だけである。
この prefix を変える事もできるが、基本的にはライブラリとテーマを差し替えて、対象のlang-*をlanguage-*に置換すれば移行は完了する。
余談
お作法として、<pre>の中に<code>を入れてソースコードを記載する必要がある。
<pre>: 整形済みテキスト<code>: プログラムのソースコード