highlight代码高亮插件怎么实现代码显示行号效果？

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 = "" + block.innerHTML.replace(/\n/g, "\n
") + "
";

            var ul = block.getElementsByTagName('ul')[0];
            if (ul.getElementsByTagName("li").length > 1) {
                ul.removeChild(ul.lastElementChild);
            }
});