highlight.line-numbers.js

<!-- 引入代码高亮插件 highlight.js -->
<script src="highlight.pack.js"></script>

<!-- 引入代码行号显示插件 highlight.line-numbers.js -->
<script src="highlight.line-numbers.js"></script>

<script>
// 初始化代码高亮插件
hljs.initHighlightingOnLoad();

// 初始化代码行号显示插件
hljsln.initLineNumbersOnLoad();
</script>

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

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