ソースコードの表示に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-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の代わりにダウンロードして適用してみてください。
コメント