1. google-code-prettify のファイルを Redmine のインストール環境へ配備する
2. レイアウト用 HTML テンプレートに変更を加える
3. Wiki ページに google-code-prettify を使ったコードを記述する
4. (オプション) Wiki フォーマットを google-code-prettify の言語指定に対応させる

google-code-prettify のファイルを Redmine のインストール環境へ配備する

最初に google-code-prettify のアーカイブを展開し、Redmine のインストール環境へ配備します。やることは公開コンテンツ用のディレクトリ public にファイルをコピーするだけですが、今回は Redmine (または Ruby on Rails) の規約に従い、JavaScript ファイルを /path/to/redmine/public/javascripts/google-code-prettify へ、CSS ファイルを /path/to/redmine/public/stylesheets/google-code-prettify へ配備することにします。

レイアウト用 HTML テンプレートに変更を加える

次に、google-code-prettify の README に従ってレイアウト用 HTML テンプレートに変更を加えます。変更点は下記パッチのようになります。google-code-prettify を普通に使用する場合と同様に、必要な言語サポートに応じて javascript_include_tag を追加することができます。

Wiki ページに google-code-prettify を使ったコードを記述する

下記のようにコードを pre 要素に記述することで、そのコードに対して google-code-prettify によるシンタックスハイライティングを有効にすることができます。なお、通常の HTML の場合と異なり、pre 要素に記述するコードを明示的にエスケープする必要はありません。

<pre class="prettyprint"><?php
...
Piece_Unity_Service_ExceptionHandler::register(new Piece_Unity_Service_ExceptionHandler_DebugInfo());
Piece_Unity_Service_ExceptionHandler::register(new Piece_Unity_Service_ExceptionHandler_ErrorLog());
Piece_Unity_Service_ExceptionHandler::enable();
...</pre>

シンタックスハイライティングの結果は下記のようになります。見た目がおとなしい感じなのは、google-code-prettify の PHP サポートの状況が良くないからです。こちらは今後に期待します。

(オプション) Wiki フォーマットを google-code-prettify の言語指定に対応させる

以上で Redmine の Wiki で google-code-prettify を使えるようにするという目的は達成できますが、ひとつ問題があります。pre 要素の属性に class="prettyprint lang-php" のように明示的に言語を指定すると、出力される HTML が崩れてしまい、実用に耐えない状態になってしまいます。

<pre class="prettyprint lang-php"><?php
...
Piece_Unity_Service_ExceptionHandler::register(new Piece_Unity_Service_ExceptionHandler_DebugInfo());
Piece_Unity_Service_ExceptionHandler::register(new Piece_Unity_Service_ExceptionHandler_ErrorLog());
Piece_Unity_Service_ExceptionHandler::enable();
...</pre>

これは Redmine のコードの class 属性を扱う部分が空白をサポートしていないために発生する問題です。下記のパッチを適用するとこの問題は解決します。

使用したソフトウェアのバージョン

参考文献

• Redmine - Feature #3032: Use google Prettify for syntax highlighting instead of CodeRay - Redmine
• Javascript code prettifier