JavaScript でコードを色づけしてくれるライブラリ google-code-prettify
Ruby のコードを色づけしてくれる Syntax を試しているうちに、このブログでもコードの色づけ（いわゆるシンタックス・ハイライト。はてなダイアリーのスーパー pre 記法みたいなやつね）をやってみたくなった。
誰でも普段は、エディタで色づけされたコードを見慣れてるわけで、やっぱり黒べったりは読みづらいといえば読みづらい。
JavaScript によるコード色づけ
ただ、このブログは WordPress で動作している。
WordPress といえば、あれか … PHP か。なので、Ruby の Syntax ライブラリは使えない。それに、そもそも Syntax は Ruby の字句解析ライブラリとしての用途に重きを置いているためか、デフォルトで対応している言語が少ない（Ruby と XML, YAML だけ）。そのへんの不満もある。
色々迷った末（五分くらい）、JavaScript によるコード色づけを試してみることにした（WordPress のプラグインはですね、種類が多すぎて比較する気にもなれませんでした）。
問題はどのライブラリを使うか。検索してみると、Google Code にいくつか見つかった。
syntaxhighlighter は対応言語は申し分ないのだが、ちょっとオーバースペック気味だ。行番号表示やクリップボードへのコピーとかは、とりあえずいらないだろう。
一方の google-code-prettify はシンプルでいい感じ。早速、試してみることにする。
google-code-prettify
使い方は README を読めば問題ないと思う。このブログでは prototype.js を使って、こんなふうに組み込んだ。
<script src="http://metareal.org/javascripts/prototype.js" type="text/javascript" charset="utf-8"></script>
<script src="http://metareal.org/javascripts/prettify.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
Event.observe(window, 'load', function() {
prettyPrint();
});
</script>
この通り、HTML も色づけしてくれる。HTML に埋め込んだ JavaScript も認識されてるのはすごいな。しかも、コード部分の指定は pre 要素か code 要素の class 属性に prettyprint を指定するだけ。シンプル。
おまけ: Ruby コードの色づけ
ちなみに、Ruby コードの色づけはどうだろう。
冒頭にあげた Syntax のコードで試してみよう。
syntax-1.0.0/lib/syntax/convertors/abstract.rb
require 'syntax'
module Syntax
module Convertors
# The abstract ancestor class for all convertors. It implements a few
# convenience methods to provide a common interface for all convertors.
class Abstract
# A reference to the tokenizer used by this convertor.
attr_reader :tokenizer
# A convenience method for instantiating a new convertor for a
# specific syntax.
def self.for_syntax( syntax )
new( Syntax.load( syntax ) )
end
# Creates a new convertor that uses the given tokenizer.
def initialize( tokenizer )
@tokenizer = tokenizer
end
end
end
end
十分だな。シンボルは色づけされてないようだけど、インスタンス変数は認識されている。