Adding line-numbers to your code
Introduction
Want to add line-numbers to your code? Here it is.
Most methods are using table
s or height-aligned div
s.
Horrible. This method uses semantic HTML and CSS counters.
Advantages
- Clean copy/paste i.e. it does not copy line numbers.
- Relatively clean and semantic HTML.
- No JavaScript.
- Responsive wrap.
The pre
element is used in combination
with code
elements for each line of code.
We have to wait for the pseudo selector ::nth-line
to
make this clean and semantic.
pre { counter-reset: linenumber } pre > code:not(:only-child)::before { content: counter(linenumber, decimal-leading-zero) ". "; counter-increment: linenumber }
The HTML
<pre> <code>if r.Authenticated {</code> <code> fmt.Println(r.User, "is authenticated")</code> <code>}</code> </pre>
As you can see, I use it myself. Beware of newlines or spaces in your HTML!
C'est Tout