Highlight.js line numbers plugin.
bower install highlightjs-line-numbers.js
npm install highlightjs-line-numbers.js
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.7.0/highlightjs-line-numbers.min.js"></script><script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.7.0/dist/highlightjs-line-numbers.min.js"></script>Download plugin and include file after highlight.js:
<script src="path/to/highlight.min.js"></script>
<script src="path/to/highlightjs-line-numbers.min.js"></script>Initialize plugin after highlight.js:
hljs.initHighlightingOnLoad();
hljs.initLineNumbersOnLoad();Here’s an equivalent way to calling initLineNumbersOnLoad using jQuery:
$(document).ready(function() {
$('code.hljs').each(function(i, block) {
hljs.lineNumbersBlock(block);
});
});If your needs cool style, add styles by taste:
/* for block of numbers */
.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 1px solid #CCC;
vertical-align: top;
padding-right: 5px;
/* your custom style here */
}
/* for block of code */
.hljs-ln-code {
padding-left: 10px;
}After version 2.1 plugin has optional parameter options - for custom setup.
| name | type | default value | description |
|---|---|---|---|
| singleLine | boolean | false | enable plugin for code block with one line |
hljs.initLineNumbersOnLoad({
singleLine: true
});hljs.lineNumbersBlock(myCodeBlock, myOptions);(Applies to hljs.initLineNumbersOnLoad() initialization only.)
If you want to skip some of your code blocks (to leave them unnumbered), you can mark
them with .hlnoln class.
If you want numbering to start from some other value than 1, you can specify a
numbering offset, in one of the following ways:
- Specifying desired offset in
hljs.lineNumbersBlock()call, as in:
hljs.lineNumbersBlock(myCodeBlock, myOptions, 10); // Numbering will start from 11- Specifying the desired offset in
data-ln-offsetattribute ofcodeelement, as in:
<pre>
<code data-ln-offset="10">
...
</code>
</pre>In both cases numbering offset will be 10, meaning that the numbering will start from 11.
You may need to select some lines of code after rendering. For instance, you may want to highlight a range of lines, selected by users, by changing their background color. The CSS selectors below can be used to perform these selection operations.
| CSS selector | description |
|---|---|
.hljs-ln-line |
Select all lines, including line numbers |
.hljs-ln-numbers |
Select all line numbers, excluding lines of code |
.hljs-ln-code |
Select all lines of code, excluding line numbers |
.hljs-ln-line[data-line-number="i"] |
Select the ith line, including line number |
.hljs-ln-numbers[data-line-number="i"] |
Select the ith line number, excluding the line of code |
.hljs-ln-code[data-line-number="i"] |
Select the ith line of code, excluding the line number |
© 2018 Yauheni Pakala | MIT License