articles » current » javascript » add-line-numbers-to-preformatted-text

JavaScript: Add Line Numbers to Preformatted Text

Automatically add line numbers to the HTML PRE element.

Automatically add line numbers to the HTML PRE element (preformatted text) using CSS and a little JavaScript.

CSS has a counter function built-in, counter(), that makes this possible. JavaScript is required to break up all the individual lines and place them into a SPAN element with the class line.

Remember that the content of the PRE tag requires < > and & be replaced with &lt; &gt; and &amp; respectively.

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	pre {
		tab-size: 4;
		counter-reset: linecounter;
		padding: 0;
		color: #eee;
		background-color: #333;
		font-size: 16px;
		line-height: 16px;

	pre span.line {
		counter-increment: linecounter;
		line-height: 16px;

	pre span.line::before {
		content: counter(linecounter);
		color: red;
		width: 30px;
		display: inline-block;
		border-right: 1px dotted #ccc;
		padding-right: 3px;
		margin-right: 5px;
		text-align: right;
		font-size: 11px;
		line-height: 16px;

	pre span.line:nth-child(odd)::before {
		background-color: #555;
	<script type="text/javascript">
	function addLineClass (pre) {
		var lines = pre.innerText.split("\n"); // can use innerHTML also
		while(pre.childNodes.length > 0) {
		for(var i = 0; i < lines.length; i++) {
			var span = document.createElement("span");
			span.className = "line";
			span.innerText = lines[i]; // can use innerHTML also
	window.addEventListener("load", function () {
		var pres = document.getElementsByTagName("pre");
		for (var i = 0; i < pres.length; i++) {
	}, false);
	<title>LINE NUMBERS</title>

TITLE 'extern "C" int atoi_asm(const char *sz);'

.model FLAT

PUBLIC	_atoi_asm

_atoi_asm	PROC NEAR

	mov  edx, DWORD PTR [esp+4] ; sz


; skip white space

	mov  al, BYTE PTR [edx]
	cmp  al, 32 ; ' '
	je   SHORT label2
	cmp  al, 9  ; '\t'
	je   SHORT label2
	cmp  al, 13 ; '\r'
	je   SHORT label2
	cmp  al, 10 ; '\n'
	jne  SHORT label3


	inc  edx
	jmp  SHORT label1

	xor  ecx, ecx
	mov  cl, BYTE PTR [edx]
	inc  edx
	push esi

	cmp  ecx, 45 ; '-'
	mov  esi, ecx
	je   SHORT label4
	cmp  ecx, 43 ; '+'
	jne  SHORT label5

	xor  ecx, ecx
	mov  cl, BYTE PTR [edx]
	inc  edx

	xor  eax, eax

	cmp  ecx, 48 ; '0'
	jl   SHORT label7

	cmp  ecx, 57 ; '9'
	jg   SHORT label7

	lea  eax, DWORD PTR [eax+eax*4]
	lea  eax, DWORD PTR [ecx+eax*2-48]

	xor  ecx, ecx
	mov  cl, BYTE PTR [edx]
	inc  edx
	cmp  ecx, 48 ; '0'
	jge  SHORT label6


	cmp  esi, 45 ; '-'
	pop  esi
	jne  SHORT label8
	neg  eax

	ret  0

_atoi_asm	ENDP

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
	&lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;


Coding Video

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.