# 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:

- A single number refers to the line with that number
- Ranges are denoted by two numbers, separated with a hyphen (-)
- Multiple line numbers or ranges are separated by commas.
- Whitespace is allowed anywhere and will be stripped off.

Examples:

5
  The 5th line
1-5
  Lines 1 through 5
1,4
  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.

# Examples

## 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