Highlight.js line numbers plugin.

DEMO | SСREENSHOTS

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.

hljs.initLineNumbersOnLoad({
    singleLine: true
});

hljs.lineNumbersBlock(myCodeBlock, myOptions);

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.

© 2018 Yauheni Pakala | MIT License