ソースコードの表示にSyntaxHighlighterを利用していたのですが、google-code-prettifyに変更しました。
Twitter Bootstrapで利用されており、SyntaxHighlighterに比べてデザインの変更が容易なため利用することにしました。
自動言語判定のため、誤判定をする場合もありますが。。
記事の目次
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-xxx
classを追加。
対応している言語は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
の代わりにダウンロードして適用してみてください。