ピクスログ

とりあえず、ブログ内でコードを載せることがちょこちょこ出てきたので更新負担の軽減のためソースコードのハイライトライブラリの導入を検討中。

とりあえず、以下の有名どころを比較してみた。

• google-code-prettify
• highlight.js
• Chili(jQuery依存)

まずはgoogle-code-prettifyから試してみる。

デモページが重かったので、印象はあまり良くなかったけど、大量の各言語コードが１ページにまとめられて変換していたためらしく動作は軽快。
若干ソースのカラーバリエーションが少ないような気もするけど、読み込むライブラリの数も1つだけなので使い勝手は悪くない。

今回試したgoogle-code-prettifyのデモページ

次にhighlight.js。

こっちもデモページの動作が重かったけど、languagesフォルダ内のファイル読み込みが多かったのが原因か特に動作は問題なさそう。

こちらもgoogle-code-prettifyと同様、ちょっと色分けが寂しい。
対応言語が多いので、用途は広そうだけど。

今回試したhighlight.jsのデモページ

最後にChili。

jQueryに依存しているので、場合によっては使いにくいかも。
デモページの動作が一番快適だったので結構期待したものの、サンプルを作って動かしたら意外と一番重かったかも（速度を量ったわけではないのでなんとなくですが）

ただカラーバリエーションもデフォルトでは一番わかりやすい点は高得点。
というか、PHPコードの変数に色を付けてくれるのがこれしか無かったってのもあるけど。

highlight.jsと同様にクラス指定ででハイライト変換の言語を選べるのもいい感じ。

今回試したChiliのデモページ

一長一短な所があるので、なかなか決め手が難しいものの個人的にはカラーバリエーションのわかりやすさでChiliが一番かな。

CSSである程度は調整できるようなので、それほど問題ではないのかもしれないけど。

今はLightBoxを使ってるのでjQueryも埋め込むのはちょっとしんどいかなぁ。
WPがjQueryに移行するって話もあったから、近いうちに変更してChiliを導入したいところ。

さて、今度はjQueryでなんか作っていくか。

追記：
同じくハイライト表示を行うJavascriptライブラリ、「SyntaxHighlighter」の記事を追加しました。
ソースコードのハイライトを行うJavascriptライブラリ「SyntaxHighlighter」