Add Line Number In Textarea - jQuery LinedTextArea

The jQuery LinedTextArea plugin converts the normal textarea element into a scrollable content-editable area with line numbers.

The plugin displays a line number count column to the left side of the textarea element.

How to use it:

1. Add references to jQuery library and the LinedTextAear plugin's files.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery-linedtextarea.js"></script>
<link href="jquery-linedtextarea.css" rel="stylesheet">

2. Class up your textarea with a given class, or target it directly with JQuery Selectors.

<textarea class="lined">
  Editable Content Here
</textarea>

$(function() {
  $(".lined").linedtextarea();
});

3. Auto scroll the textarea to a spcific line on init.

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

---

This awesome jQuery plugin is developed by aamelkov. For more Advanced Usages, please check the demo page or visit the official website.