Adding Line Numbers To HTML Textarea

Question

I have a <textarea> element as in the code below. How can I display line numbers along the left margin of it?

<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>

score 20 · Answer 1 · edited May 11 '23 at 19:04

20

This is a very simple, but effective trick. It inserts an image with the line numbers already added.

The only catch is you may need to create your own image to match your UI design.

textarea.numbered {
    background: url(http://i.imgur.com/2cOaJ.png);
    background-attachment: local;
    background-repeat: no-repeat;
    padding-left: 35px;
    padding-top: 10px;
    border-color:#ccc;
}

<textarea cols="50" rows="10" class="numbered"></textarea>

Credit goes to: Aakash Chakravarthy

edited May 11 '23 at 19:04

miken32

42,008
16
111
154

answered Jun 27 '18 at 09:22

Bern

7,808
5
37
47

12

One can call that a solution, though I'd call it a quick-fix – Gregor Weber Aug 21 '18 at 22:40
21

This solution doesn't scroll properly. Also, if a line of text is wider than the textarea, it will wrap. That means the text will continue on the next line but the line numbers won't keep up. – Scot Nery Aug 31 '18 at 21:59
1

This scrolls acceptably in Chrome and Safari, but not at all in Firefox and I cant figure out why … – Pit Apr 14 '20 at 15:08
3

It also doesn't scale properly when zooming in/out – Daniel May 14 '20 at 16:40
9

If people are wondering, this image goes up to the number `1500` – Samathingamajig Nov 29 '20 at 02:08
I managed to make it work in Firefox by putting the textarea inside a div and only scrolling the div (overflow-y: auto for the div and overflow-y: hidden for the textarea). However, I had to set the textarea to a huge height, so all the text can be shown when scrolling the div down. @ScotNery as for the wrap, I had to solve it by styling the textarea with white-space: pre – Leandro 86 Dec 12 '22 at 20:07

HoldOffHunger · Answer 2 · 2022-10-12T22:30:35.493

TLDR: Use CodeMirror

Someone else here recommended CodeMirror, and I can't hardly recommend it enough! But this answer didn't really provide any technical details.

Other solutions: Everything else I tried here has problems with line numbers not matching up with lines. I believe this is because I have monitor DPI (dots per inch) at 120%, and these solutions didn't take this into account.

So, how do you use CodeMirror??? Easy! Just look at the 21,000 words of the documentation! I hope to explain 99% of your questions on it in less than page or two.

Demo it Up!

100% working demo, and it's working perfectly in the StackOverflow sandbox:

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    lineNumbers: true,
    mode: 'text/x-perl',
    theme: 'abbott',
});

<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css"></link>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/abbott.min.css"></link>

<textarea id="code" name="code">
if($cool_variable) {
    doTheCoolThing();     # it's PRETTY cool, imho
}</textarea>

Features!

Insert/overwrite mode.
Multiple row indenting simultaneously.
Tons of themes.

TLDR: How to Use CodeMirror, in a Page or Less

Step 1 - Load Basic Core Libraries

Add this to your <head> block...

<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/lib/codemirror.js"></script>
<link rel="stylesheet" type="text/css" href="/static/js/codemirror-5.62.0/lib/codemirror.css"></link>

And, if you like to have extra-bracket color matching, also load this:

<script language="javascript" type="text/javascript" src="/codemirror-5.62.0/addon/edit/matchbrackets.js"></script>

Step 2 - Setup Syntax Highlighting

Check the /codemirror-5.62.0/mode/ dir to see what language matches the language you'll be coding in. There is extensive support in this area.

Add this to your <head> block...

<script language="javascript" type="text/javascript" src="/static/js/codemirror-5.62.0/mode/perl/perl.js"></script>

Step 3 - Initialize and Display CodeMirror

Have some textarea to use....

<textarea id="code" name="code"></textarea>

Initialize and set your codemirror in the JS. You need to use the Mimetype to indicate the mode you want to use, in this case, I'm indicating the Perl Mimetype...

var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    lineNumbers: true,
    mode: 'text/x-perl',
    matchBrackets: true,
});

Step 4 - Pick a Theme

Choose some theme you like, 'liquibyte', 'cobalt' and 'abbott' are both pretty decent dark-mode-ish themes. Run this after defining editor...

editor.setOption('theme', 'cobalt');

And that's it!

This must be one of the best documented answers on SO. And I can recommend the `simplemode` plugin if the OP wants to display something other than the supported languages. — mvreijn, May 11 '22 at 21:31
CodeMirror 6 doesn't have pre-built browser bundles unfortunately — Deloo, Jun 25 '23 at 09:06

score 13 · Answer 3 · edited May 11 '23 at 22:11

No one tried to do this using HTML5 Canvas object and by painting line numbers on it. So I've managed to put canvas and textarea, one next to the other, and painted numbers on canvas.

//
// desc: demonstrates textarea line numbers using canvas paint 
// auth: nikola bozovic <nigerija@gmail>
//
var TextAreaLineNumbersWithCanvas = function() {
  var div = document.getElementById('wrapper');
  var cssTable = 'padding:0px 0px 0px 0px!important; margin:0px 0px 0px 0px!important; font-size:1px;line-height:0px; width:auto;';
  var cssTd1 = 'border:1px #345 solid; border-right:0px; vertical-align:top; width:1px; background: #303030';
  var cssTd2 = 'border:1px #345 solid; border-left:0px; vertical-align:top;';
  var cssButton = 'width:120px; height:40px; border:1px solid #333 !important; border-bottom-color: #484!important; color:#ffe; background-color:#222;';
  var cssCanvas = 'border:0px; background-color:#1c1c20; margin-top:0px; padding-top:0px;';

  // LAYOUT (table 2 panels)
  var table = document.createElement('table');
  table.setAttribute('cellspacing', '0');
  table.setAttribute('cellpadding', '0');
  table.setAttribute('style', cssTable);
  var tr = document.createElement('tr');
  var td1 = document.createElement('td');
  td1.setAttribute('style', cssTd1);
  var td2 = document.createElement('td');
  td2.setAttribute('style', cssTd2);
  tr.appendChild(td1);
  tr.appendChild(td2);
  table.appendChild(tr);

  // TEXTAREA
  var ta = this.evalnode = document.getElementById('mytextarea');

  // TEXTAREA NUMBERS (Canvas)
  var canvas = document.createElement('canvas');
  canvas.width = 48; // must not set width & height in css !!!
  canvas.height = 500; // must not set width & height in css !!!
  canvas.setAttribute('style', cssCanvas);
  ta.canvasLines = canvas;
  td1.appendChild(canvas);
  td2.appendChild(ta);
  div.appendChild(table);

  // PAINT LINE NUMBERS
  ta.paintLineNumbers = function() {
    try {
      var canvas = this.canvasLines;
      if (canvas.height != this.clientHeight) canvas.height = this.clientHeight; // on resize
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#303030";
      ctx.fillRect(0, 0, 42, this.scrollHeight + 1);
      ctx.fillStyle = "#808080";
      ctx.font = "11px monospace"; // NOTICE: must match TextArea font-size(11px) and lineheight(15) !!!
      var startIndex = Math.floor(this.scrollTop / 15, 0);
      var endIndex = startIndex + Math.ceil(this.clientHeight / 15, 0);
      for (var i = startIndex; i < endIndex; i++) {
        var ph = 10 - this.scrollTop + (i * 15);
        var text = '' + (1 + i); // line number
        ctx.fillText(text, 40 - (text.length * 6), ph);
      }
    } catch (e) {
      alert(e);
    }
  };
  ta.onscroll = function(ev) {
    this.paintLineNumbers();
  };
  ta.onmousedown = function(ev) {
    this.mouseisdown = true;
  }
  ta.onmouseup = function(ev) {
    this.mouseisdown = false;
    this.paintLineNumbers();
  };
  ta.onmousemove = function(ev) {
    if (this.mouseisdown) this.paintLineNumbers();
  };

  // make sure it's painted
  ta.paintLineNumbers();
  return ta;
};

var ta = TextAreaLineNumbersWithCanvas();
ta.value = TextAreaLineNumbersWithCanvas.toString();

#mytextarea {
  width: auto;
  height: 500px;
  font-size: 11px;
  font-family: monospace;
  line-height: 15px;
  font-weight: 500;
  margin: 0;
  padding: 0;
  resize: both;
  color: #ffa;
  border: 0;
  background-color: #222;
  white-space: pre;
  overflow: auto;
}


/* supported only in opera */
#mytextarea {
  scrollbar-arrow-color: #ee8;
  scrollbar-base-color: #444;
  scrollbar-track-color: #666;
  scrollbar-face-color: #444;
  /* outer light */
  scrollbar-3dlight-color: #444;
  /* inner light */
  scrollbar-highlight-color: #666;
  /* outer dark */
  scrollbar-darkshadow-color: #444;
  /* inner dark */
  scrollbar-shadow-color: #222;
}


/* chrome scrollbars */

textarea::-webkit-scrollbar {
  width: 16px;
  background-color: #444;
  cursor: pointer;
}

textarea::-webkit-scrollbar-track {
  background-color: #333;
  cursor: pointer;
}

textarea::-webkit-scrollbar-corner {
  background-color: #484;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
}

textarea::-webkit-scrollbar-thumb {
  background-color: #444;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.3);
  cursor: pointer;
}

<div id="wrapper">
  <textarea id="mytextarea" cols="80" rows="10"></textarea>
</div>

There is a limitation in that we can't handle word-wrap easily in the Paint() function without iterating the entire textarea content and drawing to a hidden object for measurements of each line height, which would yield very complex code.

True, didn't test it in FireFox. But I do not see any reason why it shouldn't work in FireFox. So far it is working in IE11, Opera12, Edge, Chrome and variants, WebKit and variant, and some other browsers that support W3C Canvas object. Any explanation what exactly isn't working? thanks for info. — SoLaR, Nov 15 '19 at 00:51
in Firefox, I unable to add the new line, whatever i enter it is in single line (although i hit "return" button). — Mohasin Ali, Nov 17 '19 at 06:50
Top of my head think Firefox is not properly handing line-break characters, try css "white-space: pre;" or some other combination. I've noticed in past this was huge issue with browsers, it seams some still suffer from the same. — SoLaR, Nov 18 '19 at 08:00
It doesn't work well because after many lines the line numbers are not inline with the textarea lines. I tried to tweak it but gave up after several tries. I didn't want it at first but CodeMirror was the solution for me. — MagTun, Jul 08 '21 at 19:35
Not sure what you have tweaked, how many lines you have used, or what browser you were using. I've just tried one million lines in Chrome, line alignment works just fine. Noticed only chrome tends to slow down on one million lines, measured paintLineNumbers() function and it takes only 0~1 ms, guess textarea control is uber slow in Chrome. — SoLaR, Jul 10 '21 at 11:18
Good solution! An improvement would be to pull font size and line height values from the element style rather than hard-coding them in the script. — miken32, May 11 '23 at 19:00

SBimochan · Answer 4 · 2023-08-24T07:25:47.523

2

function generateWithNumber() {
  let inputTexts = document.getElementById("input").value
  let textsByLine = inputTexts.split("\n");
  const listMarkup = makeUL(textsByLine);
  document.getElementById("output").appendChild(listMarkup);
}
function makeUL(array) {
    let list = document.createElement('ol');
    for (let i = 0; i < array.length; i++) {
        let item = document.createElement('li');
        item.appendChild(document.createTextNode(array[i]));
        list.appendChild(item);
    }
    return list;
}
// document.getElementById('foo').appendChild(makeUL(options[0]));

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list) ") ";
  counter-increment: list;
}

<textarea id="input"></textarea>
<button onClick=generateWithNumber() >Generate</button>
<p id="output"></p>

Explanation

This code defines a function generateWithNumber() that is triggered when a button with the onClick event is clicked. The purpose of this function is to take input text from a <textarea> element, split it into lines, and display the lines as a numbered list in an <ol> (ordered list) element.

edited Aug 24 '23 at 07:25

answered Apr 06 '20 at 05:45

SBimochan

474
4
13

Remember that Stack Overflow isn't just intended to solve the immediate problem, but also to help future readers find solutions to similar problems, which requires understanding the underlying code. This is especially important for members of our community who are beginners, and not familiar with the syntax. Given that, **can you edit your answer to include an explanation of what you're doing** and why you believe it is the best approach? – Skully May 12 '23 at 15:30
@Skully-OnStrike done! – SBimochan Jun 08 '23 at 05:31
Please do not use ChatGPT to generate responses for answers, see [Temporary policy: ChatGPT is banned](https://meta.stackoverflow.com/questions/421831/temporary-policy-chatgpt-is-banned?cb=1). – Skully Jun 08 '23 at 12:57
@Skully done... – SBimochan Aug 24 '23 at 07:26

score 1 · Answer 5 · answered Oct 31 '22 at 22:15

Consider the use of a contenteditable ordered list <ol> instead of <textarea>

ol {
  font-family: monospace;
  white-space: pre; 
}

li::marker {
  font-size: 10px;
  color: grey;
}

<ol contenteditable><li>lorem ipsum      
<li>&gt;&gt; lorem ipsum
<li>lorem ipsum,\ 
<li>lorem ipsum.
<li>&gt;&gt; lorem ipsum
<li>lorem ipsum
<li>lorem ipsum
<li>lorem      
<li>ipsum
<li>&gt;&gt; lorem ipsum
<li>lorem ipsum
</ol>

However, ::marker styling seems limited (list-style-type). E.g. removing the period or vertical-align: super seems to needs other workarounds (back to li:before and counter).

Bonus: <li> also does not need the closing tag </li> (https://html.spec.whatwg.org/multipage/syntax.html#optional-tags), which saves typing.

Also as far as I understand, the <textarea> in codemirror just works in the background (Pseudo contenteditable: how does codemirror works?).

Arnav Katyal · Answer 6 · 2022-12-24T11:51:05.767

Line Numbers

Code:

const textarea = document.querySelector("textarea");
      const numbers = document.querySelector(".numbers");
      textarea.addEventListener("keyup", (e) => {
        const num = e.target.value.split("\n").length;
        numbers.innerHTML = Array(num).fill("<span></span>").join("");
        
      });
      textarea.addEventListener("keydown", (event) => {
        if (event.key === "Tab") {
          const start = textarea.selectionStart;
          const end = textarea.selectionEnd;

          textarea.value =
            textarea.value.substring(0, start) +
            "\t" +
            textarea.value.substring(end);

          event.preventDefault();
        }
      });

   body {
        font-family: Consolas, "Courier New", Courier, monospace;
      }
      .editor {
        display: inline-flex;
        gap: 10px;
        font-family: Consolas, "Courier New", Courier, monospace;
        line-height: 21px;
        background-color: #282a3a;
        border-radius: 2px;
        padding: 20px 10px;
      }
      textarea {
        line-height: 21px;
        overflow-y: hidden;
        padding: 0;
        border: 0;
        background: #282a3a;
        color: #fff;
        min-width: 500px;
        outline: none;
        resize: none;
        font-family: Consolas, "Courier New", Courier, monospace;
      }
      .numbers {
        width: 20px;
        text-align: right;
      }

      .numbers span {
        counter-increment: linenumber;
      }

      .numbers span::before {
        content: counter(linenumber);
        display: block;
        color: #506882;
      }

<div class="editor">
      <div class="numbers">
        <span></span>
      </div>
      <textarea cols="30" rows="10"></textarea>
    </div>

From: https://www.webtips.dev/add-line-numbers-to-html-textarea

It actually works quite well.

The line numbers do not occur instantly but it workds quite fast.

If a line wraps the next line's number will be displayed incorrectly. — InSync, May 11 '23 at 23:06

Codemaster United · Answer 7 · 2023-07-22T14:22:41.270

I've created a line numbering system that works good on textarea with line wrapped. I haven't customized it for single line overflowing code, but it's good if you want wrapped lines.

CodePen Demo

'use scrict';
var linenumbers = document.getElementById('line-numbers');
var editor = document.getElementById('codeblock');
    
function getWidth(elem) {
    return elem.scrollWidth - (parseFloat(window.getComputedStyle(elem, null).getPropertyValue('padding-left')) + parseFloat(window.getComputedStyle(elem, null).getPropertyValue('padding-right')))
}

function getFontSize(elem) {
    return parseFloat(window.getComputedStyle(elem, null).getPropertyValue('font-size'));
}

function cutLines(lines) {
    return lines.split(/\r?\n/);
}
    
    
function getLineHeight(elem) {
    var computedStyle = window.getComputedStyle(elem);
    var lineHeight = computedStyle.getPropertyValue('line-height');
    var lineheight;
    
    if (lineHeight === 'normal') {
        var fontSize = computedStyle.getPropertyValue('font-size');
        lineheight = parseFloat(fontSize) * 1.2;
    } else {
        lineheight = parseFloat(lineHeight);
    }
    
    return lineheight;
}

function getTotalLineSize(size, line, options) {
    if (typeof options === 'object') options = {};
    var p = document.createElement('span');
    p.style.setProperty('white-space', 'pre');
    p.style.display = 'inline-block';
    if (typeof options.fontSize !== 'undefined') p.style.fontSize = options.fontSize;
    p.innerHTML = line;
    document.body.appendChild(p);
    var result = (p.scrollWidth / size);
    p.remove();
    return Math.ceil(result);
}

function getLineNumber() {
    var textLines = editor.value.substr(0, editor.selectionStart).split("\n");
    var currentLineNumber = textLines.length;
    var currentColumnIndex = textLines[textLines.length-1].length;
    return currentLineNumber;
}
    
function init() {
    var totallines = cutLines(editor.value), linesize;
    linenumbers.innerHTML = '';
    for (var i = 1; i <= totallines.length; i++) {
        var num = document.createElement('p');
        num.innerHTML = i;
        linenumbers.appendChild(num);
            
        linesize = getTotalLineSize(getWidth(editor), totallines[(i - 1)], {'fontSize' : getFontSize(editor)});
        if (linesize > 1) {
            num.style.height = (linesize * getLineHeight(editor)) + 'px';
        }
    }
        
    linesize = getTotalLineSize(getWidth(editor), totallines[(getLineNumber() - 1)], {'fontSize' : getFontSize(editor)});
    if (linesize > 1) {
        linenumbers.childNodes[(getLineNumber() - 1)].style.height = (linesize * getLineHeight(editor)) + 'px';
    }
        
    editor.style.height = editor.scrollHeight;
    linenumbers.style.height = editor.scrollHeight;
}



editor.addEventListener('keyup', init);
editor.addEventListener('input', init);
editor.addEventListener('click', init);
editor.addEventListener('paste', init);
editor.addEventListener('load', init);
editor.addEventListener('mouseover', init);

#source-code {
    width: 100%;
    height: 450px;
    background-color: #2F2F2F;
    display: flex;
    justify-content: space-between;
    overflow-y: scroll;
    border-radius: 10px;
}

#source-code * {
    box-sizing: border-box;
}

#codeblock {
    white-space: pre-wrap;
    width: calc(100% - 30px);
    float: right;
    height: auto;
    font-family: arial;
    color: #fff;
    background: transparent;
    padding: 15px;
    line-height: 30px;
    overflow: hidden;
    min-height: 100%;
    border: none;
}

#line-numbers {
    min-width: 30px;
    height: 100%;
    padding: 15px 5px;
    font-size: 14px;
    vertical-align: middle;
    text-align: right;
    margin: 0;
    color: #fff;
    background: black;
}

#line-numbers p {
    display: block;
    height: 30px;
    line-height: 30px;
    margin: 0;
}

#codeblock:focus{
    outline: none;
}

<div id="source-code">
    <div id="line-numbers"><p>1</p></div>
    <textarea id="codeblock"></textarea>
</div>

besides a few changes, this worked wonders for me. thanks – funtkungus Aug 23 '23 at 08:51 — funtkungus, Aug 23 '23 at 08:51