Skip to content

Instantly share code, notes, and snippets.

@rafbm

rafbm/clean-markup-line-numbers.html

Created March 27, 2011 22:23
Show Gist options
  • Save rafbm/889703 to your computer and use it in GitHub Desktop.
Save rafbm/889703 to your computer and use it in GitHub Desktop.
Download ZIP
<table>-free way to display <pre> line numbers that don’t mess up the clipboard.
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment