引用コードのシンタックスハイライトは highlight.js が素晴らしすぎた

ブログでコードを引用するからには、単にべたーっと書くのではなくて エディタで見るときみたいにいい感じにシンタックスハイライトして欲しいものです。

今までに、google-code-prettify とか SyntaxHighlighter とかを使ったことはありますが、 今回はじめて使ってみたhighlight.jsがめっちゃ便利だったのでご紹介。

highlightjs

highlight.js の良い所

導入方法

<head>に以下の4行を追加。MTだと、HTML Head テンプレートに導入しました。

<!-- highlight.js -->
<link rel="stylesheet" href="http://yandex.st/highlightjs/7.5/styles/obsidian.min.css">
<script src="http://yandex.st/highlightjs/7.5/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

ついでに、MT の Rainier テンプレートのデフォルトの<pre>のスタイルが不要になったので、消し消し。

pre {
    padding: 0;
}

BEFORE & AFTER

こんな素っ気無い感じだったのが、

before

こんなにわかりやすくなりました!

after