joriszwart.nl

CSS

Adding line-numbers to your code

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.
  3. No JavaScript.
  4. 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

Related