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

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 */
td.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 */
td.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);

---

© 2017 Yauheni Pakala | MIT License