JavaScriptでプログラムコード色分け / LiosK-free Blog

JavaScriptでプログラムコード色分け

2007-06-05
カテゴリ: Client Side
タグ: JavaScript Google Tips

google-code-prettifyを導入してみた。

pre要素やcode要素の中に書いたプログラムコードを、JavaScriptを使ってクライアントサイドで色分けしてくれるらしい。

//サンプル
Object.prototype.clone = function() {
    var f = function() {}
    var p = f.prototype = this;
    var o = new f();
    try { o.toString(); } catch (e) { o.toString = function() { return p.toString.apply(p, arguments); } }
    try { o.valueOf();  } catch (e) { o.valueOf  = function() { return p.valueOf.apply(p, arguments);  } }
    return o;
}

確かに導入してみると、コードがハイライトされてる。便利だ。

使い方は簡単で、google-code-prettify - Google Codeからダウンロードしてきたjsとcssを読み込んで、window.onloadでprettyPrint()という関数を呼び出すだけ。そうすれば、class="prettyprint"が指定されたpre要素とcode要素の中がハイライトされる。

prettyprint以外のクラス名を使いたい

僕は今まで書いてきた記事では、プログラムコードの部分にはclass="code"を指定してきたから、class="prettyprint"じゃなくてclass="code"でハイライトされるように改変した。

やり方は簡単。ダウンロードしてきたprettify.jsをエディタで開き、prettyprintという小文字の文字列を検索。2箇所出てくると思うので、その部分を任意のクラス名に書き換え。

window.onloadを使いたくない。

FC2のアクセス解析との相性の関係で、window.onloadでprettyPrint()を呼び出したらうまくいかなかった。なので、window.onloadは使わずに、bodyタグの閉じタグの直上で呼び出し。

っていうのは嘘で、閉じbodyタグの直上のFC2アクセス解析スクリプト呼び出しの直上でprettyPrint()を呼び出し。

LiosK-free Blog