ここにはっつけるコードのシンタックスハイライトには Google Code Prettify をこれまで使ってたんですけど、どうもいまいちでした。有名な SyntaxHighlighter も好きになれなかった。はてなブログのように綺麗なシンタックスハイライトさせたい！ ということで作った。
かなりシャレオツな感じにシンタックスハイライトできるようになったと思います。拾ってきた Monokai スタイルの CSS を当てています。
動作環境
裏側で使っているのは Python の Pygments。JavaScript オンリーで色付けするやつよりもこいつの方が圧倒的に綺麗でした。なのでこのプラグインを使うには Python と Pygments が必要です。Heroku では動くんでしょうか。動作未確認です。
使い方
HTML の pre タグのクラス名を lexer として Pygments に渡します。Ruby のコードを書くのであれば以下のようにします。
<pre class="ruby">
<code>
class Book
def off
"all your book is 10 yen"
end
end
</code>
</pre>やってること
JavaScript で pre タグを探してサーバーにコードの中身と pre タグのクラス名を投げると、Pygmentize された HTML が返ってくるようになっております。そいつを JavaScript で拾って pre タグの中身を入れ替え。
当初は
```ruby
class Book
def off
"all your book is 10 yen"
end
end
```みたいな感じで GitHub 風にしたいと思っていて、以下のような JavaScript を書いていたんですが JavaScript 力が低すぎて断念。
$('.body').each(function() {
var Pygmentize = function(lexar, snippet) {
var result;
$.ajax({
type: 'POST',
url: '/pygmentize',
async: false,
data: {
lexar: lexar,
snippet: snippet
},
}).done(function(data) {
result = data;
});
return result;
}
var entryBody = $(this).text();
entryBody = entryBody.replace(/```(.+?) ([sS]*?)```/g,
function(whole, lexar, snippet) {
return Pygmentize(lexar, snippet);
}
);
$(this).html(entryBody);
})※Ajax なのに async: false とかしててイマイチ感ありますね。
とはいえ、汎用性の高い pre タグのクラス名を拾ってくる、という形での実装にしたので、 Markdown でなくても HTML でも Textile でもハイライトできるので結果オーライとします。
ちなみに Kramdown でクラス名を指定したいときは以下のようにするみたいです。
> hogehoge
{: .hoge }