Website logo depicts joriszwart.nl

I ❤ to create appealing stuff

Introduction

Want to add line-numbers to your code? Here it is.

Most methods are using tables or height-aligned divs. Horrible. This method uses semantic HTML and CSS counters

Advantages

  1. Clean copy/paste i.e. it does not copy line numbers.
  2. Relatively clean and semantic HTML. The <pre> element is used in combination with <code> elements for each line of code.
  3. No JavaScript.
  4. Responsive wrap.

We have to wait for the pseudo selector ::nth-line to make this really clean and semantic.

pre {
    counter-reset: linenumber
}

pre > code:not(:only-child)::before {
    content: counter(linenumber, decimal-leading-zero) ". ";
    counter-increment: linenumber
}
<pre>
<code>if r.Authenticated {</code>
<code>    fmt.Println(r.User, "is authenticated")</code>
<code>}</code>
</pre>

Beware of newlines or spaces in your HTML!

C'est tout!