bcralnit.jsはテキストエリア（textarea）やpre、divなどで行番号を追加させることができるjQueryプラグインです。Webページ内でHTMLやプログラムのコードなどを表示させたい時なんかに役立ちますね。行番号の背景カラーや文字カラーも指定できますよ。
背景カラーや文字カラーの設定もできる
以下、bcralnit.jsの実際のデモページです。
デモではtextareaを使っているものやpre、div、pを使っているものも用意されています。コードが記述されている各行の左側には、上から順番に行番号が表示されています。
横に行番号が表示されていることで、どのくらいの行が使われているかを瞬時に理解できるし、記述されているコードの説明をする時に「◯行目の……」と、ピンポイントで指定できるのが便利ですね。
また、各デモを見るとわかると思いますが、表示させる行番号では背景カラーや文字カラーを指定することも可能です。これらは、オプションから好きなカラーを設定できます。背景カラーや文字カラーのほかにも、横幅サイズの指定も可能です。
具体的には、width、background、color、addClassというオプション項目があります。デフォルト値は、widthが60px、backgroundが#ddd、colorが#333です。
使い方もシンプルで手軽に実装できる上に、背景カラーや文字カラーなども好きな色にカスタマイズできるのがいいですね。
というわけで、textareaやpreなどに記述したテキストに行番号を追加させたいという人は、ぜひ「bcralnit.js」を使われてみてはいかがでしょうか？
bcralnit.jsの詳しい実装方法やダウンロードは以下からどうぞ。
