HTMLページに表示したプログラムのコードに色を付けるライブラリ「google-code-prettify」を導入。サンプルをみると、CやJavaをはじめ、HTML、XML、CSS、Javascript、Ruby、PHP、Perl、Python、SQLなどCやBash、XMLライクの言語に対応。
導入方法は、こちらを参考に。
まず、ソースコードをダウンロードして、prettify.css と prettify.js をftpでサーバにアップロード。
そして、アップロードしたライブラリをサーバのパスにあわせてHTMLのHEAD要素内に記述。
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
BODY要素にも。
<body onload="prettyPrint()">
以下はIEと相性が悪いようだ。何かとバッティングしてエラーをはき出す。(追記2009-11-11)
または、イベントリスナーで呼び出す場合。
<script type="text/javascript">
try{
window.addEventListener("load",prettyPrint,false);
}catch(e){
// IE
window.attachEvent("onload",prettyPrint);
}
</script>
あるいは、直接呼び出しで。
<script type="text/javascript">
prettyPrint();
</script>
使い方はいたって簡単。preとcodeタグにclass名「prettyprint」を付けるだけで色を付けてくれる。
早速、色分けてくれた。