google-code-prettify を導入してみた。
これはプログラムやHTMLを色分けしてくれるJavaScriptなのですが、対応言語が多くて良い感じです。
例えば、Perlのコードがこんな風に色分けされます。↓（要JavaScript。）
# In "WebApp.pm"...
package WebApp;
use base 'CGI::Application';
# ( setup() can even be skipped for common cases. See docs below. )
sub setup {
my $self = shift;
$self->start_mode('mode1');
$self->mode_param('rm');
$self->run_modes(
'mode1' => 'do_stuff',
'mode2' => 'do_more_stuff',
'mode3' => 'do_something_else'
);
}
sub do_stuff { ... }
sub do_more_stuff { ... }
sub do_something_else { ... }
1;ただ、初期状態ではPerlの関数は一部しか色分けされないので、全部反映されるようにJavaScriptをいじっておいた。（全部はやりすぎ？）
コードの色や強調表示の設定はCSSから変更できるので、自分が読みやすいように少し編集。JavaScriptもこんな感じ。↓
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new function() {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch (e) {
return new ActiveXObject('Microsoft.XMLHTTP');
}
};HTMLまで対応しているのが素敵。↓
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>HTMLのサンプル</title>
</head>
<body>
<h1>HTMLのサンプル</h1>
<p>google-code-prettifyのテスト。</p>
</body>
</html>簡単に使えるように、はてな記法もどきでコードを書くと勝手に装飾されるようにしておいた。（Decoration.pm を編集。）今後、プログラムを掲載するのがちょっと楽しくなりそうです。（ぉ
追記
このJavaScript、IEではコード中の空行が反映されないのですね…。あと、同じくIEでコードをコピー＆ペーストしたときに改行が反映されない…。
でも、これは google-code-prettify の問題というよりIEの問題みたい。
色々試してみたら、IEでは pre に対して innerHTML でコードを流し込むと、改行が正しく反映されないみたい。仕様なのか不具合なのかは判らないけど、IE6・IE7の両方で同じ結果になった。他のブラウザでは大丈夫なのに。(T T)
で、空行が無いのは凄く気持ちが悪いし読みにくいので、JavaScriptを少し弄っておいた。prettify.js の1450行目あたりにある
cs.innerHTML = newContent;この部分を以下のように変更。
if (navigator.userAgent.indexOf('MSIE') >= 0) {
cs.innerHTML = newContent.replace(/<br>/g, ' <br>');
} else {
cs.innerHTML = newContent;
}ちょっと無理やりだけど、これで空行が反映された。
コピー＆ペーストの問題は解決が難しそうだけど、また色々試してみるとします。
さらに追記
「IEでコードをコピー＆ペーストしたときに改行が反映されない」が解決できないので、一旦外しておきます…。
もし解決できたら、また導入したいと思います。