サイト構築作業再開中です！ 今日から何回かにわたって、今時なサイト制作技術について紹介したいと思います。（周回遅れなのもあるかも
まず第1回は、google-code-prettifyの紹介〜。
これは、プログラムのソースコードなどを文法に基づいて見やすくハイライト（色づけ）してくれるものです。
見本はこんな感じになります。
配布元（公式サイト）はこちら。
google-code-prettify
ダウンロードせずにCDNから直接読み込んで使うこともできます。自分でスタイルシートをいじったりしない場合に簡単。
ダウンロードして使う場合は、Downloadsページから。
CDNから使う場合
HTMLのhead内でrun_prettify.jsを読み込みます。
<script
type="text/javascript"
src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js">
</script>
オプションで拡張言語とスキンを設定できます。
拡張言語はCSS、SQL、Lisp（Scheme）などに対応するもので、run_prettify.jsの後ろに「?lang=css」のように書き足します。拡張言語の一覧はtrunk/src。
スキンはtrunk/stylesにあるスタイル（見本ページ）を、「?skin=sunburst」のように指定します。何も指定しないとDefaultになります。
両方とも設定する場合は、「?lang=css&skin=sunburst」のように。
ダウンロードして使う場合
HTMLのhead内でprettify.cssとprettify.js、必要に応じて拡張言語用のスクリプトを読み込みます。
<link rel="stylesheet" type="text/css" href="js/prettify.css">
<script type="text/javascript" src="js/prettify.js"></script>
<script type="text/javascript" src="js/lang-css.js"></script>
さらに、bodyの読み込み完了のタイミングでprettyPrint()を呼び出し。
<body onload="prettyPrint()">
と、読み込みはこれにて完了！
HTML内でハイライトしたいpreブロックに「prettyprint」クラスを指定します。
<pre class="prettyprint">
source code here
</pre>
pre内の「<」「>」は、「<」「>」に直しておいてください。
言語は自動で判別されますが、念のため手動で指定した方が紛れがなくて安心です。（CSSなどの拡張言語では必須！）
<pre class="prettyprint lang-css">〜</pre>
lang-xxxのxxx部分は、Cならc、C++ならcpp、 C#ならcs、 Javaならjava、JavaScriptならjs、Rubyならrb、HTMLならhtml、XMLならxmlなど。拡張言語は各スクリプトファイルを参照。
さらに、「linenums」クラスを追加して行番号をつけることができます。先頭行の番号を1以外から始めるオプションもあります。
<pre class="prettyprint linenums">〜</pre>
<pre class="prettyprint linenums:10">〜</pre>
