シンタックスハイライター google-code-prettify を改造して行番号を表示しよう

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

このブログでもお世話になっている「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” と書くことで行番号を非表示
となるようになります. よかったら導入してみてください.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT