2013年4月18日木曜日

google-code-prettifyの利用

1.準備
ダウンロード:https://code.google.com/p/google-code-prettify/

1) サイトのDownloadタブを選択し、「prettify-small-xxx.tar.gz2」をダウンロード
※2013/03/18の時点では「prettify-small-4-Mar-2013.tar.bz2」でした。
※small版は必要最小限のファイルのみ入っています。
※通常版「prettify-xxx.tar.gz2」にはサンプルやマニュアルも含まれます。

2) ダウンロードしたファイルを解凍
【ファイルの中身】
google-code-prettify
+- lang-xxx.js : 各言語別の定義用JSファイル
+- prettify.css : コード表示用のスタイルシート
+- prettify.js : google-code-prettifyの本体ライブラリ
+- run_prettify.js : google-code-prettifyの読み込み用JSファイル - 不明

3) ページヘッダーへリンクを掲載
<link href="./css/prettify.css" media="all" rel="stylesheet" type="text/css" />
<script src="./js/prettify.js" type="text/javascript" />

4) ページ最後(Bodyの前)へスクリプト記載
※スクリプトはBodyのonLoadへの記載でも問題なし
<script>prettyPrint();</script>

5) コード記載
<pre class="prettyprint">
ここへコードを記述
</pre>



コード記載例
<pre class="prettyprint">
#include <stdio.h>
void main() {
sprintf('1234\n');
return;
}
</pre>

表示結果
#include <stdio.h>
void main() {
    sprintf('1234\n');
    return;
}