[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がそれぞれダウンロードできる。
また、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> 

#markdownの場合

```language-javascript
// hoge();
```

ライブラリとテーマを除けば、違いといえばlang-*language-*の差だけである。
このprefixを変える事もできるが、基本的にはライブラリとテーマを差し替えて、対象のlang-*language-*に置換すれば移行は完了する。

#余談

お作法として、<pre>の中に<code>を入れてソースコードを記載する必要がある。

  • <pre>: 整形済みテキスト
  • <code>: プログラムのソースコード