google-code-prettifyでタグの見た目を変更する

こないだのソースコード不備修正で気づきましたが、こういう時に行番号ないと困りますね。
今回はコードも短いのでよかったですが、そのうち○行目ってわからなくなりそう… :(

SyntaxHighlighterと迷いましたが、
Google先生が提供してくれている『google-code-prettify』を使うことにしました。

ダウンロードしたファイルをアップロード

google-code-prettify

上記のサイトからダウンロードします。
README.htmlをみると『lang-○○.js』言語拡張したい場合は…
ということみたいなので、最低限いれるのは『src』フォルダ内のこの3つでよさそうです。

  • prettify.css
  • prettify.js
  • run_prettify.js

ファイルの読み込みと実行

アップロードしたrun_prettify.jsを読み込みます。
prettify.cssとprettify.jsの読み込み、ついでにonload・skinの選択をしています。

 <script src="../run_prettify.js?autoload=true&amp;skin=default"></script> 

<pre>にclassを追加

google-code-prettifyを適用させるにはclassの追加が必要になります。
全データ変更していくのが面倒なので、<pre>タグ全てにclassを追加するようにjQuery追加しました。
『run_prettify.js』より先に実行させておきます。

jQuery(function($){
	$('pre').addClass('prettyprint linenums');
});

<pre>にcss追加

YUIのreset.cssと競合してしまって行番号が表示されていなかったです。
少しcssごにょっとしました。

//折り返し表示
pre{
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow:auto;
}

//行番号のリスト表示
pre ol li{
	width:95%;
	list-style:decimal outside;
	margin:0 0 0 5%;
}

行番号の表示とソースのハイライト

デフォルトからカスタマイズもしていないので、行番号は5行ごとに表示されます。

pre_after

WordPressには?

サンプルデータ(25egg.com/sample/)のみ反映していますので、ブログの本文は未着手…
WordPressにもいれるなら、少しテーマもカスタマイズしたいので、検証してからにします。