Add Link Numbers to Highlight

Add Link Numbers by using the Highlight.js plugin.

Usage

Include file after highlight.js by getting the library from CDN with

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

Initialize plugin after highlight.js:

$(document).ready(function () {
    $('pre.ql-syntax').each(function (i, block) {
        hljs.highlightElement(block);
        hljs.lineNumbersBlock(block);
    });
});

Styling

For some styles use

/* 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;
}