PROWARE technologies
PROWARE technologies

Add Lines Numbers to Preformatted Text Automatically (HTML PRE tag)

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;
		text-align: right;
		font-size: 16px;
		line-height: 16px;
	}

	pre span.line:nth-child(odd)::before {
		background-color: #555;
	}
	</style>
	<script>
	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);'
.686

.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