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;}
最后刷新下页面,就能看到了