google-code-prettifyを使ってサイト上のソースコードを装飾

いわゆるソースコードを JavaScript で色付けして見やすくするということ

当サイトは XOOPS2JP でつくられており、この「features」は pico モジュールを使用しています。
このpico上のソースコードを書くことがあるのではと思い、今回 google-code-prettify を導入してみました。

google-code-prettifyをダウンロード、解凍後、
prettify.js、prettify.css の2ファイルをサイトへアップロード
pico の一般設定の「コンテンツ共通HTMLヘッダ」へ以下を記入

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

ソースコードを装飾したい部分を pico のコンテンツ本文で以下のように記述

<pre class="prettyprint">
  ソースコード
</pre>

コンテンツ本文最後に以下を記述 JavaScript を実行させます。
サンプルでは body タグの onload に入れてありましたが、ここでは使うときだけ実行させるように本文最後に記入しました（HTMLヘッダーではタイミング的に早すぎるのでここにしました）。

<script>prettyPrint();</script>

本文フィルター
チェックオン：顔文字変換、BBCode変換、自動改行

ソースコード内の「<」は「＆ｌｔ；」（便宜上全角表記）にエスケープした状態で記入してあります。

HTML, PHP, JavaScriptなどを自動で識別しているようです。