Create Textarea With Line Number using jQueryLineNumbersPlugin

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. So here in this post I am going to show you how to easily add line number in your text area content using jQueryLineNumbersPlugin.
textarea-linenumber


Adding Line Number In Textarea Content using jQueryLineNumbersPlugin

This jQuery plugin will take any normal text area and give it line numbers.

Libraries

Include following JS libraries on Page. Don’t forget to add jquery core library before jquery-linenumbers.min.js

<script src="http://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="jquery-linenumbers.min.js"></script>

CSS

Styling textarea using CSS

<style>
textarea{
	width: 555px;
	height: 270px;
	font-size: 20px;
	padding: 10px;
	line-height: 30px;
	border-radius: 3px;
	border: 1px solid #aaaaaa;
}
</style>

HTML

Sample html text area.

<textarea>Rohit Kumar
My Public Notebook
Textarea With Line Number using jQueryLineNumbersPlugin
</textarea>



JS

Finally call linenumbers() jquery function on page and set textarea line number properties.

<script>
$(function() {   
 $('textarea').linenumbers({col_width:'75px'});	
});
</script>

See live demo and download source code.

DEMO | DOWNLOAD

Plugin Options

* col_width (Default: 25px) The width of the numbers column. Default should fit 4 columns on a textarea with no styles applied. This will need to be changed to fix the number of columns you choose and the styles applied to the textarea.
* start (Default: 1) The starting line number
* digits (Default: 4) The number of digits the line numbers should max out at, this is used for lead space calculating and does not include the colon.

Visit official github repository for more information.