syntaxhighlighter風のjsライブラリ「LineNumberWriter」

| コメント(2)

Like@Lunaticの関口くんが開発したsyntaxhighlighter風のjsライブラリ「LineNumberWriter」を導入してみました。
そもそもこのブログで、ソースコードを記事の中に書く機会があまりないのですが・・・

LineNumberWriterのcssとjsを読み込み、window.onloadなどでLNW.write();を呼び出すと、<pre><code>でマークアップしている部分に、LineNumberWriterが適用されます。

なお、onloadで呼び出すイベントが複数あると、最後に設定された関数しか実行されされません。私はto-Rさんの「複数のjsライブラリを利用する際にonloadを書き換える方法」に書かれている方法で対応しました。
外部jsファイルを新たに作成し、以下のように記述しました。

function addEvent(elm,listener,fn){
	try{
		elm.addEventListener(listener,fn,false);
	}catch(e){
		elm.attachEvent("on"+listener,fn);
	}
}

addEvent(window,"load",function(){
	LNW.write()
});

・・・というわけで、LineNumberWriterはこんな(↑)風に記述されます。
行番号付きで表示されるものと、行番号なしで表示されるものとが、タブで切り替えられるのが最大の特徴でしょうか。
Firefoxでコピー&ペーストした際、行番号もコピペされてしまうのを回避するためだそうです。かゆいところに手が届く感じですね!

コメント(2)

ご紹介&ご使用ありがとうございます。
自分の作ったものを他の人に使っていただけるというのは単純にうれしいものですね~!

>関口くん
いえいえ、素敵なツールの公開ありがとうございます。
これからもイロイロ提供しちゃってくださいね!

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー