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: January 19, 2024
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;
}

1 thought on “HTML Textarea with Line Numbers – jQuery Lined Textarea”

  1. I am a beginner in Web Development. I have not been able to make this work. The plugin is failing to install. I then manually copied the plugin folders with the \css and \js sub folders and then when I run the code, it just shows the edit box with no numbers. Bascially I am trying to build an online compiler using a rapidapi.com APIs. I already have a web page with two edit boxes, one for input and one for output and I want the input edit box to have row numbers. Any help will be appreciated.

    Reply

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...