Adding Line Numbers To HTML Textarea
HtmlTextareaHtml Problem Overview
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>
Html Solutions
Solution 1 - Html
There is Lined TextArea (Link no longer valid, see mirror) plugin for jQuery by Alan Williamson
MIT License
jQuery 1.3+
Solution 2 - Html
You can very well try Code Mirror, which is a JavaScript library for embedding a code editor in a web page.
With code lines, it has great features like
- Autocompletion
- Themes
- Mixed language modes
- Search
- Merge/diff interface
- Custom scrollbars etc.
Solution 3 - Html
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
Solution 4 - Html
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
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.
Solution 5 - Html
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!
Solution 6 - Html
CodePress is the one used in WordPress.
Solution 7 - Html
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>