bcralnit.js

JavaScript

テキストエリア(textarea)などで行番号を追加できるjQueryプラグイン「bcralnit.js」

bcralnit.jsはテキストエリア(textarea)やpre、divなどで行番号を追加させることができるjQueryプラグインです。Webページ内でHTMLやプログラムのコードなどを表示させたい時なんかに役立ちますね。行番号の背景カラーや文字カラーも指定できますよ。

背景カラーや文字カラーの設定もできる

デモ

デモではtextareaを使っているものやpre、div、pを使っているものも用意されています。コードが記述されている各行の左側には、上から順番に行番号が表示されています。

横に行番号が表示されていることで、どのくらいの行が使われているかを瞬時に理解できるし、記述されているコードの説明をする時に「◯行目の……」と、ピンポイントで指定できるのが便利ですね。

また、各デモを見るとわかると思いますが、表示させる行番号では背景カラーや文字カラーを指定することも可能です。これらは、オプションから好きなカラーを設定できます。背景カラーや文字カラーのほかにも、横幅サイズの指定も可能です。

具体的には、width、background、color、addClassというオプション項目があります。デフォルト値は、widthが60px、backgroundが#ddd、colorが#333です。

使い方もシンプルで手軽に実装できる上に、背景カラーや文字カラーなども好きな色にカスタマイズできるのがいいですね。

というわけで、textareaやpreなどに記述したテキストに行番号を追加させたいという人は、ぜひ「bcralnit.js」を使われてみてはいかがでしょうか?

bcralnit.js

関連記事

  1. multi-list

    JavaScript

    複数の選択可能なリストにするためのjQueryプラグイン「multi-list」

    multi-listは、順序付けされていないリストを複数の選択可能なリ…

  2. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  3. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

  4. Coin Slider

    JavaScript

    ユニークなエフェクトを実装できるjQueryイメージスライダー「Coin Slider」

    ユニークなエフェクトで画像がスライドしていくjQueryイメージスライ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでオブジェクトの型を取得して判定などをしたい場合はjQuery.type()を使う

    jQuery.type(obj)を使えばオブジェクトの型を知ることがで…

  6. Excolo Slider

    JavaScript

    タッチにも対応しているシンプルなjQueryスライダー「Excolo Slider」

    タッチやマウススライドにも対応しているシンプルなjQueryスライダー…

最近の記事

  1. cheero Smart USB Charger 48W CHE-320
  2. ブエノカフェ CM-200

アーカイブ

PAGE TOP