Adding Line Numbers To HTML Textarea

user_221149 0
Viewed 100137

I have a <textarea /> as in the code below. How do I display the line numbers on the left hand side of it?

Is there a jQuery plugin?

<TEXTAREA name="program" id="program" rows="15" cols="65" ></TEXTAREA>
textarea html
7 Answers

There is Lined TextArea (Link no longer valid, see mirror) plugin for jQuery by Alan Williamson
MIT License
jQuery 1.3+

user_2392470

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.

https://jsfiddle.net/vaakash/5TF5h/

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

Credit goes to: Aakash Chakravarthy

user_3355450

No one tried to do this using HTML5 Canvas object and by painting line numbers on it. So here what I've managed to pool in few hours. Put canvas and textarea, one next to the other, and painted numbers on canvas.

https://www.w3schools.com/code/tryit.asp?filename=G68VMFWS12UH

enter image description here

true there is limitation we can't handle word-wrap easy in Paint() function without iterating entire textarea content and offdrawing to mirror object for measurements of each line height. Also would yield very complex code.

preview image

user_10114360

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://codemirror.net/lib/codemirror.js"></script>
<script language="javascript" type="text/javascript" src="https://codemirror.net/mode/perl/perl.js"></script>

<link rel="stylesheet" type="text/css" href="https://codemirror.net/lib/codemirror.css"></link>
<link rel="stylesheet" type="text/css" href="https://codemirror.net/theme/abbott.css"></link>

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

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!

user_24305490
user_966560 

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>

user_52629360
Related