I'm trying to insert line numbers in code snippets on my website (https://qscintilla.com/custom-lexer-example/), using a pure CSS approach (no javascript):
As you can see on the screenshot above, I'm building my website in Wordpress. I use the "Additional CSS" feature from the latest Wordpress version to insert custom CSS. Here is my custom CSS:
pre{
counter-reset: line;
}
code{
counter-increment: line;
}
code:before{
content: counter(line);
display: inline-block;
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888;
-webkit-user-select: none;
}
It works pretty good, when I'm inserting code snippets in my HTML like so:
<pre>
<code> This is my first codeline </code>
<code> This is my second codeline </code>
<code> This is my third codeline </code>
<code> This is my fourth codeline </code>
</pre>
Unfortunately, the line numbers don't get aligned properly when the code line reaches double digits. Let's zoom in on the problem:
Of course, the same problem arises when the code line jumps from double to triple digits
How can I fix this?
If you want a pure CSS solution, there is only one way: use a fixed-width solution, i.e. explicitly declare a width on the ::before
pseudo-element. However, this approach is never future-proof as you will have to account for scenarios where the counter might run into 3, 4, or more digits.
pre {
counter-reset: line;
}
code {
counter-increment: line;
}
code::before {
content: counter(line);
display: inline-block;
width: 1.5em; /* Fixed width */
border-right: 1px solid #ddd;
padding: 0 .5em;
margin-right: .5em;
color: #888;
-webkit-user-select: none;
}
<pre>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
<code>Code</code>
</pre>