code-line-numbers

Code line numbers

Add line numbers to your <code> snippets on the page, HighLight.js is also supported

Motivation

Sometimes you need to add line numbers code sample on website pages. There is a list of ways to do it: from manual adding HTML code to using libraries like highlightjs-line-numbers.js for HighLight.js support (syntax highlighting).

But all existing solutions feel the lack in some features. This library fully implements all our needs including:

• Support of both pure HTML <pre><code> and HighLight.js snippets
• Native TypeScript support (simple JavaScript and TypeScript API)
• Webpack support (with using by require or import instead of global variable)
• Optional showing leading zeros in line numbers
• Attaching to all code snippets on the page or just to specified ones
• Not selectable line numbers
• Tiny code base (1.4 Kb)

Install

With npm installed, run

$ npm install code-line-numbers

Usage

Attach to all <code> snippets on the page

import {CodeLineNumbers} from "code-line-numbers";

CodeLineNumbers.addCodeLineNumbersOnLoad();

If you use HighLight.js, please use this call right after hljs.initHighlighting(). In case you run this code inside DOMContentReady listener use addCodeLineNumbers() instead of addCodeLineNumbersOnLoad().

Passing some selector as argument to this function, only code snippets matching this selector will be used. Default selector is pre > code which means all your <pre><code></code></pre> constructions match the selector. For adding line numbers only to some of your code snippets we recommend you to add data-line-numbers attribute to <pre> and use pre[data-line-numbers] > code selector instead of default one.

Attach to specified <code> snippet

import {CodeLineNumbers} from "code-line-numbers";

var elCode = document.querySelector("code#my-code-example");
CodeLineNumbers.addLineNumbersTo(elCode);

This code will add line numbers only to specified element passed as argument.

Styling

In order to redefine CSS for skinning purposed redeclare these two CSS selectors:

.code-line-numbers__number {
    color: #8c8c8c;
    background-color: #efefef;
    padding: 3px 10px;
    margin-right: 5px;
}

.code-line-numbers__number__zeros {
    color: transparent;
}

Hint: setting color for .hljs-line-numbers__number__zeros will show leading zeros in line numbers like 042.

License

LGPL license - use it for free.

Star us on GitHub if you like this library.