基本設計

行番号を振るための処理は、基本的にsyntaxhighlithter.jsとほとんど同じ。というか、syntaxhighlighter.jsを参考にして作りました。

処理の流れとしては、

1. まずページ内に<pre><code>とマークアップされている部分を取得します。
2. それら個々を<ol><li>番号順リストのマークアップに変換します。それら個々を<ol><li>番号順リストのマークアップに変換したものと、そのままのもの（プレーンテキスト）、それぞれ二つづつを生成します。プレーンテキストの方はデフォルトで非表示にします
3. 奇数行と偶数行のli要素それぞれに別のclass属性値を設定します。
4. 変換後のコードとプレーンテキストとを切り替えるヘッダー部分を生成します。
5. 最後に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&nbsp;sample()&nbsp;{</li>
<li class="even">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="odd">}</li>
</ol>
<pre style="display:none"><code>function sample() {
alert("sample");
}</code></pre>
</div>

こうなります。

改行をどうやって拾うか

取得したDOM要素のinnerHTMLプロパティから拾えれば全く問題なかったんです。innerHTMLから改行を拾う処理はこんな感じ。

var str = codeElement.innerHTML;
str = str.replace(/\r?\n/g, "\r");

で、splitメソッドで分割して、li要素に突っ込んでいけばOKと思っていました。

var line = str.split("\r");
var i,l,li;
for(i=0,l=line.length; i<l; i++) {
li = document.createElement("li");
li.innerHTML = line[i];
}

ところが、、WinIEがどうやっても改行を拾ってくれません。innerHTMLにした瞬間に全部改行が消えてしまう・・・！

そこで、取得した要素のコード部分をテキストノードとして拾い、そのnodeValueから拾ったら、うまくいきました。ただしこのやり方だと、テキストノード以外のノード（要素ノードとか）が混じっていると処理が複雑になりすぎてしまう・・・。ここで壁にぶち当たります。

「今の自分にはこりゃ作れない」という気になってきたので気分を切り替え、そういう仕様と割り切っていっそのことタグを使用不可にすればいいじゃんと考えました。取得したDOM要素内には常にテキストノードだけが入っている状態なら良いわけですから。

Safariのヘンなところ発見

コードの一行目に含まれているのが改行のみの場合、Safariがその改行を拾ってくれません。一行目が改行だけってシチュエーションがまずないので、これもスルーしています。

次のようになるべきコードが

  <ol>
<li class="odd"></li>
<li class="even">function&nbsp;sample()&nbsp;{</li>
<li class="odd">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="even">}</li>
</ol>

Safariでは次のようになります。

  <ol>
<li class="odd">function&nbsp;sample()&nbsp;{</li>
<li class="even">&nbsp;&nbsp;alert(&quot;sample&quot;);</li>
<li class="odd">}</li>
</ol>

ブラウザ振り分け処理

WinIEだけ別処理にしたいので振り分けます。確かWinIEだけ実装している、document.allオブジェクトを利用してみました。が、Operaもひっかかってきた（Operaもdocument.allを実装していた）ので、Operaだけが実装しているwindow.operaオブジェクトをさらに利用します。

if(document.all && !window.opera) {
WinIE用の処理
} else {
その他のブラウザ用の処理
}

ホントはもっとスマートなやり方があると思います・・・。

半角スペースの変換問題

いっぽう、WinIE以外のブラウザではinnerHTMLから改行が拾えるからタグ使えるんじゃね？と思っていたら、別の問題にぶち当たりました。次に問題となったのは半角スペースです。

まず前提として、コードのインデントなどに使われる半角スペースを拾い、&nbsp;へと変換する処理を行っています。タグに属性値をセットしている場合、この処理で属性名前の半角スペースを拾われてしまい、ヘンテコな状態に変換されてしまいました。

sample text
<a href="sample.html">sample text</a>
sample text

これが

sample text
&nbsp;&nbsp;<a&nbsp;href="sample.html">sample&nbsp;text</a>
&nbsp;&nbsp;sample&nbsp;text

こうなっちゃいました。
というわけで、結局タグは使えない仕様で行くことに決定。

CSSでも…

CSSを書く段階になってもWinIEに苦しめられます。

横に長いコードを詰め込んだときにスクロールバーを出すためにoverflow:autoを設定するわけですが、スクロールバーが出た状態のWinIEがとてもヘン。それから、ol要素にoverflow設定をするとIE6で幅がヘンなことに。syntaxhighlighter.jsを参考に、全体をdiv要素で包み、そちらにoverflow設定をするこにしました。

また、横スクロールバーが出た際にWinIEは、スクロールバーの高さ分をそのボックスの高さに含めてしまう模様。そしてそのせいで、横スクロールバーが出ると同時に、縦スクロールバーも出てしまう・・・。

横長なコードのくせに1行か2行しかない場合が最悪で、コードが横スクロールバーに隠れてしまい、ロクに見ることができなくなってしまいます。これはお話にならない！というわけでWinIEだけハックで下paddingを設定し、スクロールバー分の高さを稼ぎました。これによって縦スクロールバーが出なくなり、コードの閲覧性は上がりました。が、スクロールバーが出た時に下marginが狭くなるという副作用が・・・。もうここでお手上げとなりました。

function sample() {
alert("sample");
}

動作確認済みブラウザ

• Windows IE6 / 7 / 8
• Windows Firefox2 / 3
• Windows Opera9.6
• Windows Safari3.1
• Windows Google Chrome2
• Mac Safari3
• Mac Firefox2 / 3
• Mac Opera9.6

使い方

ダウンロードしたzipファイルを解凍すると、linenumberwriter.jsとlinenumberwriter.cssが入っています。この2つを両方とも(X)HTMLファイルから読み込んでください。例えば次のようなコードをhead要素内に記述し、呼び出します。

<script type="text/javascript" src="/js/linenumberwriter.js"></script>
<link rel="stylesheet" type="text/css" href="/css/linenumberwriter.css" media="screen,projection" />

前項JSを呼び出した後で、window.onloadイベントなどでLNW.write();というメソッドを呼び出してあげます。（その他にもwindow.onloadイベントで呼び出しているメソッドがあったら、イベントを上書きしないようご注意ください）

window.onload = function() {
LNW.write();
}

(X)HTML内の<pre><code>から</code><pre>まででマークアップされているコードが自動的に変換の対象となります。

使用上の注意&既知の不具合

• 現在の仕様では<pre><code>でマークアップしてしまうと、強制的に変換対象となってしまいますので、ページ内で例外的なスタイルを作れません。
• <pre><code>内ではタグが使えません。具体的にはコードの一部をstrong要素で強調するといった使い方や、コードの一部をspan要素でマークアップして色を付けるといった使い方はできません。これも仕様です。
  もしタグを使ってしまうと一部コードが非表示になってしまうなどして、表示が崩れます。
  0.4にアップデートするに当たり、<pre><code>内でタグが使用できるようになりました。
• 一行目に改行のみが含まれている場合、Safariではその改行を拾ってくれません。
• コードが表示エリアをはみ出した場合、スクロールバーが表示されますが、行の背景色がはみ出した部分に付きません。
• IEではスクロールバーが表示されてしまうと、いろいろとヘンなことに・・・（それをハックでごまかしています。。）

更新履歴

• 2009年10月15日 – 0.4.1にアップデート
  空白行が「nbsp;」と出力されてしまう不具合を修正しました。
• 2009年6月16日 – 0.4にアップデート
  変換対象内（<pre><code>内）でタグを使えるようにしました。コードの一部をstrong要素で強調したり、span要素で囲んで特定のスタイルを適用するといったことが可能となります。
• 2008年4月7日 – 0.2にアップデート
  タブっぽいリンクをクリックすることによって、プレーンテキストと切り替えられるようにしました。Firefoxでコードをコピペした時にリストマーカー部分がくっついてくるのが鬱陶しかったため、この機能をつけました。Firefoxではコピペしたい時は、プレーンテキストに切り替えてからコピペしましょう。
• 2008年4月5日 – 0.1.1にアップデート
  WinIEで&（アンパサンド）の変換処理がおかしかった点を修正しました。