SyntaxHighlighterのバージョン2系がいい感じ

2009 - 03 - 18

ここ最近、密かにブログを Movable Type から WordPress への移行作業を進めていて、使用しているライブラリの見直しやバージョンアップ確認などを行っていたりします。

コードをハイライトするJSライブラリ SyntaxHighlighter も例外なく確認しに行くと、ややハイテンション気味にバージョン2系リリースの報告がされていました。

このSyntaxHighlighter 2.x、前バージョンと比べて色々いい感じになっているのでご紹介。

バージョン2系の良いところ

基本的な使い方やカスタマイズ、各種APIなど、公式のドキュメントに詳しく書かれているので、shCore.jsのソースを読むこと無くカスタマイズすることも可能です。

すごいです。ナイスです。

バージョン1系ではテーマファイルは一つしか無く、コードのカラーリングスタイルを変えたい場合は独自にCSSをカスタマイズするしかありませんでしたが、バージョン2系ではテーマファイルがデフォルトで6つ用意されています。

用意されているのは以下の6種類。

少しJavaScriptの知識があれば、誰でも簡単に新しい言語の構文を追加できます。

追加方法については、SyntaxHighlighter:Brushes:Custom や APIドキュメント、デフォルトで用意されている各種言語ファイルのソースを見れば概ね分かると思います(必要と感じればまた別でまとめます)。

前バージョンでは、コードハイライトしたい箇所を以下のようにマークアップしていましたが、

<textarea name="code" class="言語名">

</textarea>

バージョン2系では、以下のようにpre要素に特殊なclassを指定することになります。

<pre class="brush: 言語名(またはエイリアス)">

</pre>

上記の理由により、JSファイルを差し替えるだけでは動作しません。

※ちなみに書き出されるコードのマークアップも違うので、カスタマイズしていた場合は対応が必要です。