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=""></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.

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




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

   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 {
	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 {
	padding-right: 0.5em;
	padding-top: 0.0em;
	text-align: right;
	white-space: nowrap;

.linedwrap .codelines .lineselect {
	color: red;

Be the first to comment

Leave a Reply

Your email address will not be published.


This site uses Akismet to reduce spam. Learn how your comment data is processed.