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>

Adding styles:

.hljs-line-numbers {
	text-align: right;
	border-right: 1px solid #ccc;
	color: #999;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

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

Additional features

Links

hljs.initLineNumbersOnLoad({
	withLinks: true
});

.hljs-line-numbers a {
	text-decoration: none;
	color: #999;
}
.hljs-line-numbers a:target {
	color: #ff0000;
	text-decoration: underline;
	outline: none;
}

---

© 2015 Yauheni Pakala | MIT License