2014/05/21

Bloggerで簡単にシンタックスハイライトする方法

google-code-prettifyというライブラリを使うのがとてもラクだと思うので、これを導入します。

あとビジュアル的にシンプルなので好み。
行番号を表示したい場合は別のライブラリを使うことをオススメ。
SyntaxHighlighterとか。

テンプレートの「HTMLの編集」で<body>タグの閉じる直前に以下のJSを読み込む。
JSはCDNを利用させてもらうことで更にラクします。
<script type="text/javascript" src="http://cdn.jpillora.com/js/jp-prettify.js"></script>
投稿内でコードを表示したい部分を 
<pre class="prettyprint">
... {{ some codes }} ...
</pre>
という具合に囲む。
{{ some codes }}の中はHTML特殊文字エスケープする事を忘れずに。