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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

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.onloadprettyPrint()という関数を呼び出すだけ。そうすれば、class="prettyprint"が指定されたpre要素とcode要素の中がハイライトされる。

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

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

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

window.onloadを使いたくない。

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

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

うまくいった。

便利だー。

スポンサーサイト

関連記事

トラックバック URL

http://liosk.blog103.fc2.com/tb.php/12-cb3e287e

トラックバック

コメント

コメントの投稿

お名前
コメント
編集キー
 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。