Enable Line Numbering to any HTML Textarea

Lightweight solution without code editor plugins.

While browsing through code snippets online, a handful of code demonstrations are implemented in code playgrounds such as JSFiddle and CodePen:

Screenshot by Author | In-browser code editors of jsfiddle and codepen respectively. Usually such platforms include both syntax highlights and line-numbering functionalities.

More often than not due to the nature of code playgrounds where multiple programming languages are implemented onto a single platform, it is more efficient to implement plugins such as CodeMirror which offers multiple features such as autocompletion, custom-language syntax highlights, line numbering etc.

However, when a more simplistic code editor is required instead — where only line numbering is needed, embedding a code editor plugin such as CodeMirror could be an overkill. Fortunately, there is a way to enable line numbering to any HTML Textarea element with just a few lines of Vanilla JavaScript code and CSS styling.

Illustration by Author | Screenshot of minimalistic in-browser code-editor

FYI: The HTML file to render the above can be retrieved from my GitHub at codeEditor.html

There are 3 parts to the code implementation— (1) HTML markup code for…