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

準備・インストール

1. 当該サイトからダウンロードします。prettify-21-Jul-2010.zip と、prettify-small-21-Jul-2010.zip がありますが、このサイトではprettify-small-21-Jul-2010.zipを使いました。

2. ファイルを解凍してできたsrcフォルダごとアップロードしますが、最低限必要なのはprettify.jsとprettify.cssです。

3. HTMLヘッダテンプレートもしくは、使用したいテンプレートのhead要素内（</head>直前）に

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

を記述します。

4. body要素内に、

onload="prettyPrint()" 

を記述します。

具体的利用法

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

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

または、

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

あるいは、

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

として使います。

カスタマイズ

1. スクリプトの呼び出しについては、404 Blog Not Found:javascript+CSS - google-code-prettifyの導入に書かれているように、body要素内に、

onload="prettyPrint()"

を記述せず、</body>の直前に、

<script type="text/javascript">prettyPrint();</script>

と記述しています。

2. 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;
}

を追加しています。

関連リンク

• 404 Blog Not Found:javascript+CSS - google-code-prettifyの導入