rafbm/clean-markup-line-numbers.html

## clean-markup-line-numbers.html
<html>
<head>
    <meta charset="utf-8">
    <title>Clean-Markup Line Numbers™</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>&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;Clean-Markup Line Numbers&trade;&lt;/title&gt;
    &lt;style&gt;

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

    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;pre class=&quot;blockcode&quot;&gt;&lt;code&gt; ... &lt;/code&gt;&lt;/pre&gt;

    &lt;script&gt;

        var pres = document.getElementsByClassName(&#x27;blockcode&#x27;), pre, code, lines, pl, cl;
        for (pl = pres.length, p = 0; p &lt; pl; p++) {
            pre  = pres[p];
            code = pre.children[0];

            code.innerHTML = code.innerHTML.split(&quot;\n&quot;).map(function(line) {
                return &#x27;&lt;span class=&quot;line&quot;&gt;&#x27; + line + &#x27;&lt;/span&gt;&#x27;;
            }).join(&quot;\n&quot;);

            lines = code.getElementsByClassName(&#x27;line&#x27;);
            for (cl = lines.length, l = 0; l &lt; cl; l++) {
                lines[l].style.width = pre.scrollWidth + &#x27;px&#x27;;
            }
        }

    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</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>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Clean-Markup Line Numbers™</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><html>
	<head>
	<meta charset="utf-8">
	<title>Clean-Markup Line Numbers™</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></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>