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.


  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
<code>if r.Authenticated {</code>
<code>    fmt.Println(r.User, "is authenticated")</code>

Beware of newlines or spaces in your HTML!

C'est tout!