Rainbowとは

現在このNibbleblogの初期テーマの一つであるGoogleSimpleを使用しているが、このテーマにはRainbowという簡易シンタックスハイライト機能を提供するJavaScriptライブラリーが付属している。このライブラリーは超軽量にもかかわらず、C, Shell, Java, D, CoffeeScript, Scheme, JavaScript, R, Haskell, Python, HTML, Smalltalk, C#, Go, PHP, Ruby, Lua, CSSといった言語のCSSによるシンタックスハイライトに対応している。

Rainbowの使い方

以下にPHPのHello WorldでRainbowのテストをしてみる。

<html>
 <head>
  <title>PHP Test</title>
 </head>
 <body>
 <?php echo '<p>Hello World</p>'; ?> 
 </body>
</html>

<pre><code data-language="general"></code></pre>でコードを囲み、data-language要素の値を小文字の言語名にすれば良い。というか、投稿画面のTinyMCEというJavaScript製WYSIWYGエディターと連携しており、これがほとんどやってくれるようになっている。ただ行番号はないっぽいし、本当に簡易なシンタックスハイライトなようで。

本テーマでRainbowを使用する際のTips

元のCSSファイル（/themes/google_simple/css/rainbow.css）では長い行が折り返されてしまうため、横方向にはスクロールするよう以下のとおり追加した。

pre {
    border: 1px solid #ccc;
 /* word-wrap: break-word; */
    padding: 6px 10px;
 /* line-height: 19px; */
    margin-bottom: 20px;
 /* 以下追加 */
    width: 93%;
    line-height: 1.5;
    white-space: pre;
    overflow-x: auto;
    overflow-y: hidden;
}