シンタックスハイライター google-code-prettify を改造して行番号を表示しよう
このブログでもお世話になっている「google-code-prettify」.
ハイライトしたいコードを
<pre class="prettyprint"> // ハイライトしたいコード </pre>
とかいて, body タグに
<body onload="prettyPrint()">
と書くだけでコードをハイライトしてくれる便利なJSプラグインです. しかしこれ, 行番号表示してくれません. っと思っていたのですがなんだか対応してくれてるみたいです.
preタグのクラス属性に
<pre class="prettyprint linenums">// ハイライトしたいコード </pre>というふうに “linenums” というクラスを追加するだけで, 行番号を表示してくれるみたいです. “linenums:数値” と書けば行番号の開始値を指定することもできます. “linenums”をいちいち指定するのは面倒なので, 中身をいじってデフォルトで表示するよう改造してみました.
改造した内容は,
prettify.js の 1100 ~ 1110 行目あたりにある
var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(\d+))?/);
var lineBreaker;
if (numberLines) {
↓
var numberLines = job.sourceNode.className.match(/\blinenums\b(?::(.+))?/);
if (!numberLines) { numberLines = ["linenums", undefined]; }
var lineBreaker;
if (numberLines && numberLines[1] != "none") {
と変更します.内容としては match しなかった場合にnumberLinesにデフォルト値を入れて行番号を入れる処理を常にするようにします. そして match の \d+ を .+ に変更することで文字列にもマッチするようにし, numberLines[1] が ‘none’ だった場合行番号表示をオフにするようにしています.
これで- “linenums” を指定しなくても行番号を表示
- “linenums:none” と書くことで行番号を非表示
シンタックスハイライター google-code-prettify を改造して行番号を表示しよう | TM Life http://t.co/nIlpkiGU