futuremix

phpspot開発日誌の記事や、404 Blog Not Found の記事で話題の google-code-prettify (Javascript code prettifier) を WordPress に入れてみました。まあ手順を解説するまでもないのですが、ダウンロードしたらサーバに置いて、WordPress の管理画面から[表示]→[テーマエディタ]で「ヘッダー」のテーマを編集します。以下のコードを head 要素内に挿入するだけ。もちろんパスは適切に書き換える必要があります。

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

Java, HTML, CSS, PHP のほか SQL にも対応しているらしいです。C# もそれなりに対応してくれそうですが、Delphi は難しいかも。それにしてもどうやって判定しているんでしょうか。すごいですね。.js ファイルのサイズも 44k とすごいですが。

あとは記事中の pre 要素のクラス名を prettyprint にすればよいのですが、このサイトの場合すでに別のクラス名をつけて黒い背景スタイルシートも適用しているので、書き換えではなく次のような感じでクラスを追加しました。

  //ここに Java などのコードを書く

これでも問題なくクラス名を認識してくれます。そうすれば JavaScript が OFF でも通常のクラスのスタイルシートが適用されますので黒背景となり、本文と紛らわしいということはありません。逆に言えば hoge クラスと prettyprint クラスのスタイルシートが重ねがけになるので、このままでは見にくくなります。

そこで prettify.css の中身を黒背景対応に書き換えてみます。ここでは単純に補色にしてみます。たとえば

.str { color: #080; }

ならば 16進数で FFF から 080 を引くと F7F になるので

.str { color: #F7F; }

にする、といった具合で書き換えてみました。でも今のスタイルシートだと、code 要素は白背景なんですよね……。

テーマ・テンプレート・スタイルシートを書き換えたのにあわせて、コード部分の黒背景を止めて、淡い色の背景にしました。