google-code-prettify

preタグ・codeタグでコードをハイライト表示する方法は様々ありますが、このサイトではgoogle-code-prettifyを利用しています。

準備・インストール

当該サイトからダウンロードします。prettify-small-21-May-2009.zipと、prettify-21-May-2009.zip がありますが、このサイトではprettify-small-21-May-2009.zipを使いました。
ファイルを解凍してできたsrcフォルダごとアップロードしますが、最低限必要なのはprettify.jsとprettify.cssです。

HTMLヘッダテンプレートに

<script type="text/javascript" src="<$mt:BlogURL$>src/prettify.js"></script>
<link rel="stylesheet" href="<$mt:BlogURL$>src/prettify.css" type="text/css"/>

を記述します。

bodyタグ内に、
```
onload="prettyPrint()" 
```
を記述します。

具体的利用法

このサイトではコードの記述にはpre要素とcode要素を使っていますが、pre要素またはcode要素に、prettyprintというクラスを設定します。

<pre><code class="prettyprint">
コードの内容
</code></pre>

または、

<pre class="prettyprint">
コードの内容
</pre>

あるいは、

<code class="prettyprint">コードの内容</code>

として使います。

カスタマイズ

スクリプトの呼び出しについては、404 Blog Not Found:javascript+CSS - google-code-prettifyの導入に書かれているように、bodyタグ内に、
```
onload="prettyPrint()"
```
を記述せずに、</body>の直前に
```
<script type="text/javascript">prettyPrint();</script>
```
と記述しています。

cssファイルについてはstyle.css内に

div.asset-body pre,
div.asset-more pre {
	margin: 1.5em auto;
	padding: 1em;
	border: 1px solid #777;
	clear: both;
	width: 90%;
	overflow: scroll;
	color: #333;
	background: #f6f6f6;
}
div.asset-body > pre,
div.asset-more > pre {
	overflow: auto;
}

を追加しています。

関連リンク