どっかのサイトがシンタックス・ハイライトを導入していたので真似した。ローカルでやろうかと思ったけどフィードに<span class="kwd">function</span>とかがたくさん入るのが嫌だったので、JavaScriptでハイライトしてくれるgoogle-code-prettifyにした。正式名称はJavascript code prettifierらしい。
google-code-prettifyにしたのは、必要な機能がシンタックス・ハイライトだけでできればフォーマットの自動判定があれば良いかなーくらいだったので。自動判定に頑張って貰おうとして、
$(function () {
$("pre").addClass("prettyprint");
prettyPrint();
});とか書いて全てのpre要素を自動的にハイライトさせてみたんだけど、非対応なものとかでアレなことになってしまったので、結局半手作業でハイライトさせたいpre要素のクラス名にprettyprintを振ってやった……。
CSSのシンタックス・ハイライトはコアに含まれていないので、利用したい場合は以下のように書く必要があった。
<script type="text/javascript" src="prettify.js"></script>
<script type="text/javascript" src="lang-css.js"></script>順序が重要でlang-css.jsはprettify.jsより後ろに書かなくてはならない。当たり前といえば当たり前なんだけどうっかり逆の順序で書いてしまってはまった……。Closure Compiler Serviceを使えば複数のJavaScriptファイルをまとめたりもできるので、まとめてしまうとそういう間違も起こさず良いかもしれない。流行りのHTTPリクエストの節約にもなる(この場合は1つだけどね！)。実際にこのサイトで使用しているprettify.min.jsはClosure Compiler Serviceでコンパイルしたもの。
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name prettify.min.js
// @code_url http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js
// @code_url http://hail2u.net/scripts/prettify/lang-css.js
// ==/ClosureCompiler==
$(function () {
prettyPrint();
});Closure Compiler Serviceのフォームには上記のように入力してコンパイルした。lang-css.jsはrgba()やhsla?()をサポートさせたりプロパティ名のハイライト色を変更したかったので、このサイトにカスタマイズしたものを置いてそれを読み込ませている。ついでにjQueryを使ってprettyPrint()が自動的に呼ばれるようにして、<body onload="prettyPrint()">とか書かなくて済むようにもした。
CSSテーマはir_blackを適当にカスタマイズしたものでwidget.cssに書いてある。一応ir_black.cssやh2u_black.cssとかも書いたけど使ってない……。