highlight代码高亮插件怎么实现代码显示行号效果?
highlight代码高亮插件实现代码行号效果
先上效果图:
先添加 highlight.min.js 插件
Html代码
<script defer="defer" src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.1/highlight.min.js#"></script>
CSS代码
/*代码行号*/
pre code {
padding: 30px 20px 30px 20px!important;
overflow-x:scroll;
}
.hljs li {
list-style: decimal-leading-zero;
border-left: 5px solid #333 !important;
padding: 2px 5px !important;
margin: 0 !important;
line-height: 14px;
box-sizing: border-box;
color: inherit !important;
}
.hljs li:nth-of-type(even) {
background-color: rgba(255,255,255,.015);
color: inherit
}
document.addEventListener('DOMContentLoaded', (event) => {
hljs.initHighlightingOnLoad();
//设置行号代码
document.querySelectorAll('code').forEach((block) => {
block.innerHTML = "<ul><li>" + block.innerHTML.replace(/\n/g, "\n</li><li>") + "</li></ul>";
var ul = block.getElementsByTagName('ul')[0];
if (ul.getElementsByTagName("li").length > 1) {
ul.removeChild(ul.lastElementChild);
}
});