Highlight.js line numbers plugin with pagure's modifications.
bower install highlightjs-line-numbers.js
npm install highlightjs-line-numbers.js
<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.4.0/highlightjs-line-numbers.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.4.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>
Include the stylesheet:
<link rel="stylesheet" href="path/to/highlightjs-line-numbers.min.css" />
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