Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 124 Commits
.github/ISSUE_TEMPLATE		.github/ISSUE_TEMPLATE
dist		dist
samples		samples
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
bower.json		bower.json
gulpfile.js		gulpfile.js
package-lock.json		package-lock.json
package.json		package.json

Repository files navigation

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

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

<scriptsrc="//cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@2.9.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:

<scriptsrc="path/to/highlight.min.js"></script><scriptsrc="path/to/highlightjs-line-numbers.min.js"></script>

Initialize plugin after highlight.js:

hljs.highlightAll();hljs.initLineNumbersOnLoad();

Here’s an equivalent way to callinginitLineNumbersOnLoad 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 parameteroptions - 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.lineNumbersBlockSync(myCodeBlock,myOptions);

hljs.lineNumbersValue(myCodeBlock,myOptions);

startFrom

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

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

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

Specifying the desired offset indata-ln-start-from attribute ofcode element, as in:

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

In both cases numbering offset will be10, meaning that the numbering will start from10.

Skipping some blocks

(Applies tohljs.initLineNumbersOnLoad() initialization only.)

If you want to skip some of yourcode 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 wantto 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