add-line-numbers-to-a-code-block-with-counter.md

Add Line Numbers To A Code Block With Counter

The counter feature in CSS is a stateful feature that allows you to increment and display a number based on elements' locations in the document. This feature is useful for adding numbers to headings and lists, but it can also be used to add line numbers to a code block.

We need to initialize the counter to start using it. This will give it a name and default it to the value 0. We'll tie this to a pre tag which wraps our lines of code.

pre.shiki {
  counter-reset: line-number;
}

Then we need to increment the counter for every line of code that appears in the code block

pre.shiki .line {
  counter-increment: line-number;
}

Last, we need to display these incrementing line-number values before each line.

pre.shiki .line:not(:last-of-type)::before {
  content: counter(line-number);
  /*
   * plus any styling and spacing of the numbers
   */
}

This essentially attaches an element to the front (::before) of the line whose content is the current value of line-number. It is applied to all but the last .line because shiki includes an empty .line at the end.

Here is the real-world example of this that I referenced for this post.

Note: the counter can be incremented, decremented, or even explicitly set to a specific value.