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">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<style>
	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;
	}
	</style>
	<script type="text/javascript">
	function addLineClass (pre) {
		var lines = pre.innerText.split("\n"); // can use innerHTML also
		while(pre.childNodes.length > 0) {
			pre.removeChild(pre.childNodes[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
			pre.appendChild(span);
			pre.appendChild(document.createTextNode("\n"));
		}
	}
	window.addEventListener("load", function () {
		var pres = document.getElementsByTagName("pre");
		for (var i = 0; i < pres.length; i++) {
			addLineClass(pres[i]);
		}
	}, false);
	</script>
	<title>LINE NUMBERS</title>
</head>
<body>

<pre>
TITLE 'extern "C" int atoi_asm(const char *sz);'
.386P

.model FLAT

PUBLIC	_atoi_asm

_ALPHATOINT	SEGMENT
_atoi_asm	PROC NEAR


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

label1:

; 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

label2:

	inc  edx
	jmp  SHORT label1
	
label3:

	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
	
label4:

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

	xor  eax, eax

	cmp  ecx, 48 ; '0'
	jl   SHORT label7
	
label6:

	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

label7:

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

	ret  0

_atoi_asm	ENDP
_ALPHATOINT	ENDS
END
</pre>

<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&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;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	
&lt;/body&gt;
&lt;/html&gt;
</pre>

</body>
</html>

Coding Video

https://youtu.be/WlaEqoFo7q0


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.
CLOSE