Google Code Prettify導入が超絶簡単になっていた

久々にサイトを改造していて気づきましたが、Google製シンタックスハイライターのGoogle Code Prettifyにオートローダーが出来てるやないですか！

これでもうjsやcssをいちいちサーバーにアップする必要もないしわざわざprettyPrint()をする必要もありません。時代は進んでいるんですねえ。2013年9月に導入されたっぽいですが、ざっと検索してみたところ、“Google Code Prettify”の検索結果上位にオートロードについて書いているサイトが見当たらなかったので2014年7月時点のGoogle Code Prettify最新版導入方法についてまとめてみました。

と言っても難しい話はまったくなく、以下の一行で導入は完了です。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

こんだけ。これで<pre class='prettyprint'></pre>内に書いたコードがシンタックスハイライトされるようになります。

各種スキンを使いたい場合は後ろに引数をつなげる。例えばSons-Of-Obsidianを使いたい場合は以下のようにする。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?skin=sons-of-obsidian"></script>

言語を指定する場合も同様。テーマがDesertで言語がCSSなら以下。

<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=desert"></script>

テーマと言語以外に、autoloadでページロードと同時に実行するかどうかと、callbackでコールバック関数が指定できるみたいです。autoload=falseなら自動実行はされない。

使い方は以前とまったく変わっていなくて、preタグにprettyprintクラスを設定するだけです。

<pre class='prettyprint'>
// Write Code
</pre>

行番号を表示したい場合はクラスにlinenumsを追加する

<pre class='prettyprint linenums'>
// Write Code
</pre>

行番号を任意の番号から始めたい場合はlinnumsの後にコロンと番号を指定する。例えば777行から始めたい場合は以下のようにする。

<pre class='prettyprint linenums:777'>
// Write Code
</pre>

自分好みにカスタマイズしたい場合は以前同様にサーバーにアップロードするやり方になります。