2009年07月13日

JavaScriptによるソースの色分け

「コードの色分けをしてくれるJavaScriptライブラリ」について。前から導入しようと思っていたのだけど、どっちにするか悩んだまま放置してました。


悩んでいたうちの1つは「highlight.js」。
手っ取り早く取り付けられて、ブログにも挿入可能。
BSDライセンス。

highlight.jsを使ったサンプル
http://www.mwsoft.jp/programming/javascript/highlight_js.html

スタイルもいろいろ用意されていて、使い易い。
製作者がどこの国の人か分からない。
文字からするとロシアかそっちの方だろうか。


もう1つは「google-code-prettify
名前の通り、Google codeの中の1プロジェクト。
Apache License 2.0。

google-code-prettifyを使ったサンプル
http://www.mwsoft.jp/programming/javascript/google_code_prettify.html


どちらも数行記述するだけで色分けができるので、非常に簡単に使える。

実行速度はブラウザや負荷によってバラつきが多いが、下記のサンプルでは、highlight.jsの方が早かった。

※注意事項
下記URLをクリックする場合、とりあえず1000件で試してみて、大丈夫そうだったら3000件をお試しください。
Firefox3.5だとやけに遅かったです。Chrome使うとハエーって言うことになります。スペックが微妙なIE6マシンを使っている方は、レスポンスが返ってくるか保証しません。

【重い】1000行のJavaを色づけする【低スペックマシンでの閲覧危険】
highlight.js
http://www.mwsoft.jp/programming/javascript/highlight_js_1000.html
google_code_prettify
http://www.mwsoft.jp/programming/javascript/google_code_prettify_1000.html

【重い】3000行のJavaを色づけする【低スペックマシンでの閲覧危険】
highlight.js
http://www.mwsoft.jp/programming/javascript/highlight_js_3000.html
google_code_prettify
http://www.mwsoft.jp/programming/javascript/google_code_prettify_3000.html


調べて見ると、これ以外にも「syntaxhighlighter」とか「Chili」とかいろいろある様子。
全部は試せないので、しばらくはブログでgoogle-code-prettifyを、HTMLを書くときはhighlight.jsを使ってみようかと思う。


【参考にしたサイト】
あなたのソースコードを彩る、Syntax Highlighterまとめ - Blog.37to.net
http://blog.37to.net/2007/06/syntax_highlighter/

ブログでコードを見やすく highlight.jsが手っ取り早い - Non-programmer's Ruby in Pocket
http://weed.cocolog-nifty.com/wzero3es/2009/06/highlightjs-6bc.html

プログラムのコードに色を付ける「google-code-prettify」 - JavaScript Library Archive
http://javascript.webcreativepark.net/library/google-code-prettify