最近いろんなところで見かけるようになったsyntaxhighlighter.js。文法が分かりやすいようにコードがカラーリングされ、行番号が付いてとてもコードが見やすいです。導入を検討しようかと思ったのですが、(X)HTML的に文法違反になるのは許せないなーと思い、違った形のものをJavaScriptで書いてみました。当サイトに導入済みです。次のような見た目になります。
function sample() {
alert("sample");
}ただし、私が作ったのはSyntaxHighlighterではありません。行番号が付き、1行おきに背景色が付くだけのものです。syntaxはhighlightされません。よって、SyntaxHighlighterとは名乗れないので、LineNumberWriterと名乗ることにします（これ、果たして妥当な英語なんでしょうか・・・）。
もし使ってみたいという方がおりましたらご自由に使ってみてくださいまし。下記リンクからzipファイルでダウンロードできます。
勢いで作ったものなので、バージョンは0.1ということにします。それから一応、ライセンスはMITライセンスとしておきますね。（2008年4月5日追記）更新履歴を付けるようにしました。
動作確認済みブラウザ
- 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で&（アンパサンド）の変換処理がおかしかった点を修正しました。