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. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  2. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  3. GoogleSheets-HTMLImporter
  4. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  5. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  6. Lobibox

    JavaScript

    レスポンシブなメッセージを通知できる「Lobibox」

    Lobiboxはレスポンシブなメッセージボックスを通知できるjQuer…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6

アーカイブ

PAGE TOP