LineNumberWriterを0.4にバージョンアップ
1年以上放置していたので今更感がありますが、LineNumberWriterをバージョンアップしました。今回から、変換対象のコード内でタグが使えるようになります。例えば以下のように、strong要素やspan要素などを挿入することが可能です。（※）
<strong>で囲んでみました
<span style="color:#F33;">で囲んでみました※もちろん(X)HTMLの文法的にcode要素に含められない内容（ブロック要素など）は含めちゃダメですよ。
今度Sugamo.cssという企画に参加することにしたので、何かプライベートワークをやっていかなきゃいけないような気になり、とりあえずコレのバージョンアップでも、と着手しました。
実は前からタグが使えるようにしたくてちょくちょくいじってはいたんですが、IEの独自仕様でまた色々とつまづいてしまい、挫折しちゃってたんです。でもまぁ最近、良いアイデアが浮かんだのでどうにか形になった、という。
LineNumberWriter開発メモ
LineNumberWriterを作るに当たって気づいた点やその他補足など。自分で書いていて改めて気付きましたけど、かなりの欠陥品です...orz
基本設計
行番号を振るための処理は、基本的にsyntaxhighlithter.jsとほとんど同じ。というか、syntaxhighlighter.jsを参考にして作りました。
処理の流れとしては、
- まずページ内に<pre><code>とマークアップされている部分を取得します。
それら個々を<ol><li>番号順リストのマークアップに変換します。それら個々を<ol><li>番号順リストのマークアップに変換したものと、そのままのもの（プレーンテキスト）、それぞれ二つづつを生成します。プレーンテキストの方はデフォルトで非表示にします- 奇数行と偶数行のli要素それぞれに別のclass属性値を設定します。
- 変換後のコードとプレーンテキストとを切り替えるヘッダー部分を生成します。
最後にdiv要素で包みます（後でスタイルを整える都合）。最後にこれらをdiv要素内に書き出し、元の<pre><code>部分と差し替えます。
<pre><code>function sample() {
alert("sample");
}</code></pre>これが
<div class="LNW">
<div class="header" style="display:none">
<a href="#" class="ctrl1">with line number</a>
<span class="ctrl2">plain text</span>
</div>
<div class="header">
<span class="ctrl1">with line number</span>
<a href="#" class="ctrl2">plain text</a>
</div>
<ol>
<li class="odd">function sample() {</li>
<li class="even"> alert("sample");</li>
<li class="odd">}</li>
</ol>
<pre style="display:none"><code>function sample() {
alert("sample");
}</code></pre>
</div>こうなります。
LineNumberWriter – syntaxhighlighter風のJavaScriptを書いてみた
最近いろんなところで見かけるようになったsyntaxhighlighter.js。文法が分かりやすいようにコードがカラーリングされ、行番号が付いてとてもコードが見やすいです。導入を検討しようかと思ったのですが、(X)HTML的に文法違反になるのは許せないなーと思い、違った形のものをJavaScriptで書いてみました。当サイトに導入済みです。次のような見た目になります。
function sample() {
alert("sample");
}ただし、私が作ったのはSyntaxHighlighterではありません。行番号が付き、1行おきに背景色が付くだけのものです。syntaxはhighlightされません。よって、SyntaxHighlighterとは名乗れないので、LineNumberWriterと名乗ることにします（これ、果たして妥当な英語なんでしょうか・・・）。
もし使ってみたいという方がおりましたらご自由に使ってみてくださいまし。下記リンクからzipファイルでダウンロードできます。
勢いで作ったものなので、バージョンは0.1ということにします。それから一応、ライセンスはMITライセンスとしておきますね。（2008年4月5日追記）更新履歴を付けるようにしました。