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.8.0/highlightjs-line-numbers.min.js"></script>

<script src="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>

highlightjs-line-numbers.js 2.8.0 is known to work with highlight.js 11.3.1.

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.highlightAll();

hljs.initLineNumbersOnLoad();

Here’s an equivalent way to calling initLineNumbersOnLoad using jQuery:

$(document).ready(function() {
    $('code.hljs').each(function(i, block) {
        hljs.lineNumbersBlock(block);
    });
});

You can also import the library as an es6 module:

import hljs from 'highlight.js';

import { decorateHljs } from 'highlightjs-line-numbers.js/src/decorator.es6.js';
decorateHljs(hljs);
hljs.highlightAll();
hljs.initLineNumbersOnLoad();

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

Events

There is one custom event fired when a code element has been augmented with line numbers. You can listen for it like so:

const code = document.querySelector('code.my-code');
code.addEventListener('line-numbers-inserted', (e) => {
    // you can work with the line numbers modifications, now.
});

Options

After version 2.1 plugin has optional parameter options - for custom setup.

version	name	type	default value	description
v2.1	singleLine	boolean	false	enable plugin for code block with one line
v2.8	startFrom	int	1	Start numbering from a custom value

Examples of using

hljs.initLineNumbersOnLoad({
    singleLine: true
});

hljs.lineNumbersBlock(myCodeBlock, myOptions);

hljs.lineNumbersValue(myCodeBlock, myOptions);

startFrom

If you want numbering to start from some other value than 1, you can specify a numbering offset, in one of the following ways:

• Specifying desired offset in hljs.lineNumbersBlock() call, as in:

hljs.lineNumbersBlock(myCodeBlock, {
    startFrom: 10
});

• Specifying the desired offset in data-ln-start-from attribute of code element, as in:

<pre>
    <code data-ln-start-from="10">
    ...
    </code>
</pre>

In both cases numbering offset will be 10, meaning that the numbering will start from 10.

Skipping some blocks

(Applies to hljs.initLineNumbersOnLoad() initialization only.)

If you want to skip some of your code blocks (to leave them unnumbered), you can mark them with .nohljsln class.

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

More plugins

• highlightjs-lang.js — plugin to display language name with formatting;

Development: Building, and Basic Test of Code

Build the project.

./node_modules/.bin/gulp build

Run http-server to test that the code is working:

./node_modules/.bin/http-server -c-1 test

That will start the server on localhost on port 8080, which you can navigate to. The index page invokes highlighting and this library, so you should see a C# snippet and line numbers.

---

© 2023 Yauheni Pakala and Community | MIT License