highlight.js默认不显示行号，要显示行号也非常简单，应用一个highlightjs的插件 highlightjs-line-numbers

本站leyeah.com就是应用的这个插件:

官方git库： https://github.com/wcoder/highlightjs-line-numbers.js

首页再你需要显示的页面引入js库

<script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>

在页面script中加上这段代码

复制
$(document).ready(function() {
    $('pre.ql-syntax').each(function(i, block) {
        hljs.lineNumbersBlock(block);
    });
});

再加上这段css

复制
/* for block of numbers */ 
.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 */ 
.hljs-ln td {padding-left: 10px;}
.hljs-ln-n{padding-right: 5px;}

最后刷新下页面，就能看到了