Candil.eu.org - Automatically numbering lines of code will make your blog look more beautiful and look more professional. This method can be done as an alternative if you are not using a syntax highlighter or any other syntax highlighter. Or you want your blog to look more beautiful but still maintain the blog's performance.
<html>
<head>
<meta charset="utf-8">
<title>Contoh Penomoran Baris Kode™</title>
<style>
body {
width: 800px;
margin: 0 auto;
}
pre.blockcode {
overflow-x: auto;
}
pre.blockcode code {
display: block;
}
pre.blockcode code span.line::before {
content: counter(code-line);
display: inline-block;
color: grey;
text-align: right;
width: 2em;
padding-right: 0.5em;
border-right: 1px solid lightcoral;
margin-right: 1em;
}
pre.blockcode code span.line {
counter-increment: code-line;
display: inline-block;
width: 100%;
border-top: 1px solid lightblue;
border-bottom: 1px solid lightblue;
margin-top: -1px;
}
</style>
</head>
<body>
<pre class="blockcode"><code> ... </code></pre>
<script>
var pres = document.getElementsByClassName('blockcode'), pre, code, lines, pl, cl;
for (pl = pres.length, p = 0; p < pl; p++) {
pre = pres[p];
code = pre.children[0];
code.innerHTML = code.innerHTML.split("\n").map(function(line) {
return '<span class="line">' + line + '</span>';
}).join("\n");
lines = code.getElementsByClassName('line');
for (cl = lines.length, l = 0; l < cl; l++) {
lines[l].style.width = pre.scrollWidth + 'px';
}
}
</script>
</body>
</html>
