世の中には色んな html 向け syntax highlighter があるけど、世界の Google さんの google-code-prettify が良さげだったので採用してみる。
Features (機能)
- Works on HTML pages (HTML上で動くんだぜ)
- Works even if code contains embedded links, line numbers, etc. (リンクとか行番号とかあっても動くんだぜ)
- Simple API : include some JS&CSS and add an onload handler. (JSとCSSをincludeしてonloadするだけで動くんだぜ)
- Lightweights : small download and does not block page from loading while running. (サイズが小さいし、動作中もサイトの閲覧を邪魔しないんだぜ)
- Customizable styles via CSS. (CSSで見た目を変更できるんだぜ)
- Supports all C-like, Bash-like, and XML-like languages. No need to specify the language (CとかBashとかXMLとかに似ている言語をすべてサポートするんだぜ。言語を指定する必要ないんだぜ) #<= これがお気に入りポイント
- Extensible language handlers for other languages. You can specify the language. (他の言語向けに拡張できるんだぜ。言語指定も出来るんだぜ)
- Widely used with good cross-browser support. Powers code.google.com (広く使われてるし、クロスブラウザ対応も良い感じなんだぜ。何しろ code.google.com で動いてるし。)
Usage (使い方)
Put code snippets in <pre class="prettyprint">...</pre> or <code class="prettyprint">...</code> and it will automatically be pretty printed. (コード片を書くとき、<pre class="prettyprint">...</pre> とか <code class="prettyprint">...</code> ってしとけば、あとは自動的に Pretty Print になるんだぜ)
以下、作業ログ。
とりあえず download して、サーバにアップ。
DocumentRoot 配下に static ディレクトリを作成、その下に配置してみた。
このサイトは WordPress なんで header.php を以下のように書き換える。
... <script src="/static/prettify.js" type="text/javascript"></script> <link href="/static/prettify.css" rel="stylesheet" type="text/css"/> </head> <body onload="prettyPrint()"> ...
これで準備 OK のはず。
というか、↑これも Pretty Print になってるね！
携帯からの閲覧だと当然のようになってないけどね！
微妙に誤判定してるっぽいけどね！
というか、WordPress なんだから誰かがプラグイン作ってくださっている気がした！
もうやっちゃったから良いけどね！
以上。
