PROWAREtech
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 < > and & 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>
<!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">
<title>Document</title>
</head>
<body>
</body>
</html>
</pre>
</body>
</html>Coding Video
Comment
