Думаю большинство из тех, кто из всех доступных аналогов для подсветки исходного кода выбрал highlight.js сталкивались с отсутствием в нем нумерации строк. Так вот, с тем же столкнулся и я, после чего, написал плагин, который добавляет в highlight.js нумерацию строк.

Демо

Установка

Плагин доступен для установки через:

bower

bower install highlightjs-line-numbers.js

npm

npm install highlightjs-line-numbers.js

Или можно скачать последнюю версию прямо из GitHub.

Подключение

Заметным отличием highlight.js от аналогов является его простота подключения и использования, эту же простоту я старался поддержать и в этом плагине. Поэтому подключить его не составит труда.

Подключаем файл плагина на страницу, после highlight.js:

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

Инициализируем, после highlight.js:

hljs.initLineNumbersOnLoad();

Все, это все, что нужно, чтобы отобразить нумерацию строк.

Теперь немного подсластим, добавив стилей:

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

Ммм, теперь намного лучше.

jQuery

Так же имеется возможность использования совместно с jQuery:

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

Репозиторий на GitHub. :metal:

На этом все.

Теги: javascript, opensource, проекты

Редактировать