Google Code Prettifyでシンタックスハイライト（2016/05/15 追記）

このブログでちょいちょいコードを書くことがあるので、見やすくシンタックスハイライトしてみます。ほら、技術系ブログだからね。一応。

Bloggerに標準でありそうな機能なのに、どうもないっぽい。しっかりしてよGoogle。

有名どころをいろいろ探してみたのですが、あまりHTMLをいじるのはイヤなので、一番簡単に導入できるやつを使ってみました。

結局どれよ

じゃじゃん。Google Code Prettifyにしました。ていうかブログのタイトルに書いてあるね。
Google謹製ならBloggerの機能にしてくれてもいいのに。しっかりしてよGoogle。

他にもhighlight.jsも検討したんですが、

<link rel="stylesheet" href="/path/to/styles/default.css" />
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

の3行を書かなきゃいけないらしい。あ、これ早速使ってますよ。シンタックスハイライト。

まあ3行書くくらいなら大したことないんですけど、

• 1箇所にまとめて書けば管理が楽だけど、headタグ内に書かなきゃいけない（＝ファイルの読み込みが遅いとその間ページの表示がブロックされる）
• CSSをヘッダ内に書いてJSをbodyタグの下の方に書けばページ表示はブロックされないけど、分散するのがイヤ

というジレンマ。まあだいたいbodyタグ内でCSSを読んでも普通に表示されるっぽいですが、そこはHTMLの規格に従っておきたいところ。ほら、技術系ブログだから。

じゃあGoogle Code Prettifyはどうなのよ、というと…

<script type="text/javascript" src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

この1行を書くだけでOKらしい。さすがGoogle。
場所はわかりやすい＆ページ表示に影響がでないように、bodyの閉じタグの直前に書いておきましょう。

使い方

あとは、シンタックスハイライトしたいコードをこんなかんじにすればOK。

<pre class="prettyprint">
シンタックスハイライトしたいコード
</pre>

言語はなんと自動判別。さすがGoogle。でも短いコードだと間違えることもあるっぽいので、classにlang-XXXって形で言語を指定すればちゃんと表示してくれます。心配性な子は毎回指定しておきましょう。

あとは、classにlinenumsを追加すれば行番号も表示してくれるとか。さらにlinenums:XXXって形で数字を指定すると開始行番号を指定できるとか。

テーマを変える

記事本文と区別がつきやすいように、コードの部分を暗めにしたい。そんな願い叶えます。

ロード時にskin=XXXって感じでテーマを指定するだけ。簡単だね！
用意されてるテーマはいろいろあるよ。Sons-Of-Obsidianってのがよさげ。他は行番号が5つおきにしか表示されないからなんか寂しい。

辞書を引いたらobsidianは黒曜石って意味らしい。うん確かに黒いね。

他にもいろんな子がテーマを作ってるけど、他の子がつくったテーマを使う場合は別途CSSを読み込まなきゃいけない。多分。面倒だからやっぱりこれでいいや。

結局こうなった

テーマ指定の他に、なるべくページ表示をブロックしないように遅延ロードを許可してこんなかんじにしました。

<script type="text/javascript" src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian" async="async" defer="defer"></script>

bodyの閉じタグ直前に書くなら遅延ロードはなくてもほとんど変わりませんが、あって損するもんじゃないからつけてます。

試しに色分けしてみる

ここまでさんざん使っておいて今更ですが、C言語のソースを行番号つきで色分けしてみました。

/* スタジオHに入りまーす */
#include <studio.h>

int main(void)
{
    /* 地獄の言葉 */
    printf("hell, word");
    return 0;
}

(・∀・)ｲｲ!!

今度からコード載せるときはこれ使おっと。

2016/05/15 追記

いつの間にやら"//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"は404になっていたので、移転先のGitHubのコードをロードするといいとおもいます。

<script type="text/javascript" src="//rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>

rawgit.comはGitHubの公式CDNじゃないらしいですけどね。