Package Exports

highlightjs-line-numbers.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (highlightjs-line-numbers.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

highlightjs-line-numbers.js

Highlight.js line numbers plugin.

DEMO | SСREENSHOTS

Install

Bower

bower install highlightjs-line-numbers.js

Npm

npm install highlightjs-line-numbers.js

Getting the library from CDN

<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>

Usage

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

Options

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

Examples of using

hljs.initLineNumbersOnLoad({
    singleLine: true
});

hljs.lineNumbersBlock(myCodeBlock, myOptions);

CSS selectors

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