Skip to content

TRSasasusu/highlightjs-highlight-lines.js

Repository files navigation

highlightjs-highlight-lines.js

Line highlighting plugin for Highlight.js

DEMO

DEMO with highlightjs-line-numbers.js

Install

Get from CDN,

<script src="//cdn.jsdelivr.net/gh/TRSasasusu/highlightjs-highlight-lines.js@1.2.0/highlightjs-highlight-lines.min.js"></script>

or download from this repository.

Usage

Include highlightjs-highlight-lines.min.js after highlight.js.

<script src="path/to/highlight.min.js"></script>
<script src="path/to/highlightjs-highlight-lines.min.js"></script>

Initialize after highlight.js.

hljs.highlightAll();
hljs.highlightLinesAll([
    [{start: 2, end: 4, color: '#555'}, {start: 7, end: 7, color: 'yellow'},], // Highlight some lines in the first code block.
    [{start: 3, end: 4, color: 'rgba(255, 255, 255, 0.2)'},], // Highlight some lines in the second code block.
]);

Include highlightjs-highlight-lines.min.js after highlight.js and highlightjs-line-numbers.js.

<script src="path/to/highlight.min.js"></script>
<script src="path/to/highlightjs-line-numbers.js"></script>
<script src="path/to/highlightjs-highlight-lines.min.js"></script>

Initialize after highlight.js and highlightjs-line-numbers.js.

hljs.highlightAll();
hljs.initLineNumbersOnLoad();
hljs.highlightLinesAll([
    [{start: 2, end: 4, color: '#555'}, {start: 7, end: 7, color: 'yellow'},], // Highlight some lines in the first code block.
    [{start: 3, end: 4, color: 'rgba(255, 255, 255, 0.2)'},], // Highlight some lines in the second code block.
]);

Using hljs.highlightElement

See DEMO using hljs.highlightElement.

License

MIT License