HTML Textarea with Line Numbers – jQuery Lined Textarea

Lined Textarea is a lightweight (4 KB only), cross browser and cross platform jQuery plugin to create HTML textarea element with line numbers. The plugin auto / dynamically insert number to each new line of textarea.

You just need to create a standard HTML textarea element, this jQuery plugin will automatically add numbering. You can also highlight specific line of textarea with color.

Plugin Overview

Plugin: Lined Textarea
Author: Alan Williamson
Licence: MIT Licence
Published: June 7, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 5.89 KB

How to Make HTML Textarea with Line Numbers

1. Load the jQuery and lined-textarea‘s CSS and JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Lined Textarea CSS -->
<link href="css/jquery-linedtextarea.css" rel="stylesheet">

<!-- Lined Textarea JS -->
<script src="js/jquery-linedtextarea.js"></script>

2. Create a standard HTML textarea element with class name lined and add your text contents into it.

<textarea class="lined" rows="10" cols="60">
This is some text in textbox. 
You can also leave it blank.
</textarea>

3. Finally, initialize the plugin in jQuery document ready function to active the textbox numbering.

$(document).ready(function(){

   $(".lined").linedtextarea();

});

4. If you want to highlight / select specific number in line, you can use the following option.

$(".lined").linedtextarea({
   selectedLine: 4
});

5. If you want to customize the styles, you can edit plugin’s CSS file. The default CSS styles are:

.linedwrap {
	border: 1px solid #c0c0c0;
	padding: 3px;
}

.linedtextarea {
	padding: 0px;
	margin: 0px;
}

.linedtextarea textarea, .linedwrap .codelines .lineno {
	font-size: 10pt;
	font-family: monospace;
	line-height: normal !important;
}

.linedtextarea textarea {
	padding-right:0.3em;
	padding-top:0.3em;
	border: 0;
}

.linedwrap .lines {
	margin-top: 0px;
	width: 50px;
	float: left;
	overflow: hidden;
	border-right: 1px solid #c0c0c0;
	margin-right: 10px;
}

.linedwrap .codelines {
	padding-top: 5px;
}

.linedwrap .codelines .lineno {
	color:#AAAAAA;
	padding-right: 0.5em;
	padding-top: 0.0em;
	text-align: right;
	white-space: nowrap;
}

.linedwrap .codelines .lineselect {
	color: red;
}