Simple example

To highlight code syntax, add .language-* class to the <code> element.

In this case: <pre><code class="language-css"></code></pre>

p { color: red }

Load from file

Use the data-src attribute on empty <pre> elements, like so:

<pre data-src="myfile.js"></pre>


Show lines

Add class line-numbers to your desired <pre> and line-numbers plugin will take care.


Highlight lines

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.