google-code-prettifyの設置

ソースコードの表示にSyntaxHighlighterを利用していたのですが、google-code-prettifyに変更しました。
Twitter Bootstrapで利用されており、SyntaxHighlighterに比べてデザインの変更が容易なため利用することにしました。
自動言語判定のため、誤判定をする場合もありますが。。

1. CSSとJSのダウンロード
2. CSSとJSの読み込み
3. prettyPrint関数の呼び出し
- 3.1. jQueryが利用できる環境
- 3.2. jQueryが利用できない環境
4. google-code-prettifyの利用
デザインの変更

1. CSSとJSのダウンロード

下記のページからCSSとJSをダウンロードしてサーバーにアップします。
Downloads – google-code-prettify

.bz2、.tarの解凍はLhaplusなどの解凍ソフトで解凍できます。

2. CSSとJSの読み込み

<head>内に記述します。お好みでJSは</body>の直前に。

<link rel='stylesheet' href='<?php echo get_template_directory_uri(); ?>/google-code-prettify/prettify.css' type='text/css' />
<script type='text/javascript' src='<?php echo get_template_directory_uri(); ?>/google-code-prettify/prettify.js'></script>

3. `prettyPrint`関数の呼び出し

prettify.jsを読み込んだだけでは適用されないため、onload時にprettyPrint関数を実行する必要があります。

3.1. `jQuery`が利用できる環境

<script>
jQuery(function() {
    prettyPrint();
});
</script>

3.2. `jQuery`が利用できない環境

<script>
(function() {
  if(window.addEventListener) {
    window.addEventListener('load', prettyPrint, false);
  }
  else if(window.attachEvent) {
    window.attachEvent('onload', prettyPrint);
  }
})();
</script>

参考：google-code-prettifyで、onloadじゃない関数の呼び出し方 #JavaScript – Qiita

4. google-code-prettifyの利用

<pre>タグにprettyprintのclassをつける。

<pre class="prettyprint">
ここにソースコード
<pre>

行番号の付与

linenumsのclassを追加。

<pre class="prettyprint linenums">
ここにソースコード
ここにソースコード
ここにソースコード
<pre>

開始行番号を指定する

linenums:xxのclassを追加。

linenumsのclassは無くてもいいのですが、linenums:xxに対してlinenumsのclassのCSSが適用されないため、linenumsのclassを追加しています。

<pre class="prettyprint linenums:10 linenums">
ここにソースコード
ここにソースコード
ここにソースコード
<pre>

言語の指定をする

lang-xxxclassを追加。
対応している言語はC, friends, Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, Makefilesなど。
Ruby, PHP, VB, Awkあたりはほどほどに対応しているようです。

<pre class="prettyprint linenums lang-html">
ここにソースコード
ここにソースコード
ここにソースコード
<pre>

デザインの変更

Prettify Themes Galleryに色々なテーマがそろっているので、prettify.cssの代わりにダウンロードして適用してみてください。

[AD]