highlight.line-numbers.js

Описание

Самописный плагин для отображения номеров строк в highlight.js.
Демо: https://yangrz.gitee.io/highlight.line-numbers.js/demo.html

Почему создается новый плагин

Фронтенд-плагин для выделения кода highlight.js по умолчанию не имеет функциональности отображения номеров строк. В моём блоге раньше использовался популярный плагин highlightjs-line-numbers.js для отображения номеров строк. Однако, при внимательном рассмотрении было замечено, что этот плагин заменяет пустые строки пробелами. Но иногда пустые строки имеют специальное значение, и хотелось бы, чтобы плагин не делал никаких изменений в коде!

Поэтому был создан данный плагин для отображения номеров строк.
При написании этого плагина были использованы некоторые части кода из highlightjs-line-numbers.js.

Подробнее: https://www.yangdx.com/2020/04/144.html

Как использовать

Добавьте JS-файл и код (в правильной последовательности):

<!-- Подключите плагин highlight.js -->
<script src="highlight.pack.js"></script>

<!-- Подключите плагин highlight.line-numbers.js -->
<script src="highlight.line-numbers.js"></script>

<script>
// Инициализация плагина highlight.js
hljs.initHighlightingOnLoad();

// Инициализация плагина highlight.line-numbers.js
hljsln.initLineNumbersOnLoad();
</script>
```Добавьте CSS-стили:
```css
pre {
    position: relative;
}
.hljsln {
    display: block;
    margin-left: 2.4em;
    padding-left: 0.7em !important;
}
.hljsln::-webkit-scrollbar {
    height: 15px;
}
.hljsln::-webkit-scrollbar-thumb {
    background: #666;
}
.hljsln::-webkit-scrollbar-thumb:hover {
    background: #797979;
}
.hljsln::-webkit-scrollbar-thumb:active {
    background: #949494;
}
.hljsln .ln-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 2.4em;
    height: 100%;
    background: #333;
}
.hljsln .ln-num {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 2.4em;
    height: 1em;
    text-align: center;
    display: inline-block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.hljsln .ln-num::before {
    color: #777;
    font-style: normal;
    font-weight: normal;
    content: attr(data-num);
}
.hljsln .ln-eof {
    display: inline-block;
}

Открытые интерфейсы

Этот плагин имеет два публичных метода: hljsln.initLineNumbersOnLoad() и hljsln.addLineNumbersForCode().
① Обычно достаточно использовать метод hljsln.initLineNumbersOnLoad(), который автоматически добавляет нумерацию строк в блоках кода при полной загрузке страницы.
② Метод hljsln.addLineNumbersForCode() используется для прямого добавления нумерации строк в текст кода, как показано ниже:

var html = 'xxx';
html = hljsln.addLineNumbersForCode(html);

Однако вызов только метода hljsln.addLineNumbersForCode() недостаточен; вам также потребуется самостоятельно добавить CSS-класс hljsln к тегу code, чтобы обеспечить отображение нумерации строк.
Мой личный блог использует этот метод для CKEditor, что позволяет отображать нумерацию строк прямо в редакторе.