jQuery linenumbers plugin

The jQuery linenumbers plugin turns this...

into this...

By simply doing this...

<script src="jquery-linenumbers.min.js"></script>

neat huh. Line numbers make it easy to track the size of a text area, and look right at home if your dealing with code. It wraps lines intelligently, just because the textarea wraps doesn't mean it's actually a new line. How wonderful it recognizes that.

If you want to get fancy there are some additional options you can pass...

  1. col_width: Default: 25px The width of the numbers column. Default should be big enough for 4 columns on a text area with no styles applied. This will need to be modified for the number of digits you choose, and the textarea styles.
  2. start: Default: 1 The number at which line numbering starts.
  3. digits: Default 4 The number of digits the line numbers should max out at. This si used for calculating leading space, and does not include the colon.

For example:

$('textarea').linenumbers({'20px', 1, 1});

You'll need to give your text area a set width, or the two line numbers won't line up right with the text, this has been tested as a px value, but percents should be ok in any format as long as the col_width is the same. Other than that it should work just fine. Internet Explorer has not been fully tested (due to the lack of a machine that can run it) but should work.

Download

version 1.0.2 — Sep 17, 2017 — 4.80kb