Penomoran Baris Kode Secara Otomatis


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