2009年7月5日日曜日

Google Code Prettifyを使ってブログに書くコードをハイライト表示してみる

今更感たっぷりですがGoogle謹製のライブラリを投入!

google-code-prettify
http://code.google.com/p/google-code-prettify/

利用方法等はこちらのREADMEを参照。


準備

1. 配布物一式をダウンロードする。

2. JavascriptとCSSのファイルをしかるべき場所にアップロードしてインクルードする。

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


3. documentのbodyタグに onload="prettyPrint()" と追加する。

4. スタイルシートを編集して好みの色を指定する。


使い方

ブログにコードを書く場合は、<pre class="prettyprint">...</pre> もしくは <code class="prettyprint">...</code> の中に書きます。
そうすると自動的にコードがハイライト表示されます。

0 件のコメント: