How to use

Obviously, this only works on code blocks (<pre><code>) and not for inline code.

You specify the lines to be highlighted through the data-line attribute on the <pre> element, in the following simple format:


The 5th line
Lines 1 through 5
Line 1 and line 4
1-2, 5, 9-20
Lines 1 through 2, line 5, lines 9 through 20

In case you want the line numbering to be offset by a certain number (for example, you want the 1st line to be number 41 instead of 1, which is an offset of 40), you can additionally use the data-line-offset attribute.

You can also link to specific lines on any code snippet, by using the following as a url hash: #{element-id}.{lines} where {element-id} is the id of the <pre> element and {lines} is one or more lines or line ranges that follow the format outlined above. For example, if there is an element with id="play" on the page, you can link to lines 5-6 by linking to #play.5-6

If line numbers are also enabled for a code block and the <pre> element has an id, you can add the linkable-line-numbers class to the <pre> element. This will make all line numbers clickable and when clicking any line number, it will change the hash of the current page to link to that specific line.


Line 2


Lines 15-25


Line 1 and lines 3-4 and line 42


Line 43, starting from line 41


Linking example

Compatible with Line numbers


Even with some extra content before the code element.

Some content

With linkable line numbers