| コメント(0) | トラックバック(0)

Piece Framework で使用しているプロジェクト管理システム Redmine には Wiki システムがあり、そこでは PHP や HTML などのコードのシンタックスハイライティングに JavaScript ベースの google-code-prettify を使用しています。

google-code-prettify を採用したのは、Redmine に組み込まれているシンタックスハイライティングライブラリ CodeRay が PHP をサポートしていないためです。(次期バージョン 0.9 RC1 で PHP をサポートする模様です。)

Redmine の Wiki で google-code-prettify を使うための基本的な手順は下記のようになります。

KUBO Atsuhiro
  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 へ配備することにします。

コピーするファイル コピー先のパス
src/*.js /path/to/redmine/public/javascripts/google-code-prettify
src/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 サポートの状況が良くないからです。こちらは今後に期待します。

redmine-wiki-with-google-code-prettify.png

(オプション) 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-wiki-with-google-code-prettify-broken.png

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

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

Redmine0.8.2
Ruby on Rails2.1.2

参考文献

トラックバック(0)
  • このブログ記事のトラックバックURL:
コメント