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

imagelightboxレスポンシブ対応でタッチフレンドリーな画像ギャラリー「imagelightbox」前のページ

シンプル・軽量・レスポンシブなスライダー実装「jQuery Slideshow」次のページjQuery Slideshow

関連記事

  1. curtains.js

    JavaScript

    カーテンがヒラヒラ動くようなテクスチャ面を実装できる「curtains.js」

    curtains.jsはカーテンがヒラヒラと波打つ動きのようなテクスチ…

  2. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  3. JUMBLE

    JavaScript

    テキストの色をカラフルにシャッフルさせるjQueryプラグイン「JUMBLE」

    JUMBLEというjQueryプラグインを使えば、指定したテキストの色…

  4. JavaScript

    レスポンシブに対応したビフォーアフター画像を実装できる「before-after.js」

    before-after.jsはシンプルでレスポンシブに対応したビフォ…

  5. iconate.js

    JavaScript

    アイコンをオシャレにアニメーションしながらtransformさせる「iconate.js」

    iconate.jsはアイコンをアニメーションさせながら別のアイコンへ…

  6. jRCarousel

    JavaScript

    モダンエフェクトなレスポンシブ対応のカルーセル実装「jRCarousel」

    jRCarouselはモダンエフェクトなカルーセルを実装できるjQue…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP