Skip to content

Instantly share code, notes, and snippets.

@atomjoy

atomjoy/code-line-numbers.css

Created March 20, 2025 11:31
Show Gist options
  • Save atomjoy/bf73beb919873a8a2699992b943ad4cc to your computer and use it in GitHub Desktop.
Save atomjoy/bf73beb919873a8a2699992b943ad4cc to your computer and use it in GitHub Desktop.
Download ZIP
CSS Pre code line numbers.
Raw
code-line-numbers.css
/*
Line numbers css
<pre>
<code>
<span class="line">Line 1</span>
<span class="line">Line 2</span>
<span class="line">Line 3</span>
</code>
</pre>
*/
pre {
counter-reset: line;
}
.line {
counter-increment: line;
}
.line:before {
content: counter(line);
}
.line:before {
--webkit-user-select: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment