[SyntaxHighlight] Google Code PrettifyからPrism.jsに変更した時に気をつけたこと

4 min read

ブログで使用しているコードのシンタックスハイライトを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 がそれぞれダウンロードできる。
また、GitHubnpmから取得する事もできる。

サポート言語

Supported languagesにサポート言語の一覧がある。

定番の C 系, Java, JavaScriptから、SassScssなど細かな指定にも対応している。
ちなみに HTML を指定したい場合は、markupを指定する必要がある。

テーマ

現在、テーマは以下の 6 種類。

  • Default
  • Dark
  • Funky
  • Okaidia
  • Twilight
  • Coy

公式のテーマ以外にも自作や非公式なテーマの適応も可能。

プラグイン

現在、プラグインは以下の 18 個。

coloreasingのプレビューから、ライブラリの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>: プログラムのソースコード