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">
	<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: 16px;
		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

Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site.