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.3.0/highlightjs-line-numbers.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/[email protected]/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 */ td.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 */ td.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);
© 2018 Yauheni Pakala | MIT License