highlight.js 增加行数 （codesnippet插件添加行号）
最近升级了ckeditor编辑器，添加了codesnippet（代码高亮插件），这里不介绍codesnippet的使用方法了，大家可以自行百度，这类教程非常的多codesnippet是一款基于 highlight.js 代码高亮插件，但是默认不显示行号行数的，由于我之前使用的插件是显示的，所以还了以后感觉非常别扭，于是就尝试在百度了找了一下，发现还真没有有效的解决办法，于是就自己动手吧，其实非常简单，我先说一下我的思路。
首先吧代码片中的换行（\n）都替换成 </li><li>, 然后在代码内容的前面添加 <ul><li>, 而最后 添加 </li></ul>,这样以来，代码就被<li></li>每行隔开了，然后通过css添加行数，就非常简单了。
下面看具体实现的方法
1/先添加一段JS ，就是实现我上述方法的JS（不能添加在highlight.js内，因为此方法并非使用highlight.js函数来完成的）
//代码高亮自定义
$("code").each(function(){
$(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
});
2/在css内添加以下内容（本文中的代码片效果是在vs.css基础上修改的，所以css例子可能只适用与该实例，需要更多效果可以自己去修改）
.hljs {
border: 0;
font-family: "Consulas", "Courier New", Courier, mono, serif;
font-size: 12px;
background: #eee !important;
display: block;
padding: 1px;
margin: 0;
width: 100%;
font-weight: 200;
color: #333;
white-space: pre-wrap
}
.hljs ul {
list-style: decimal;
background-color: #fff;
margin: 0px 0px 0 40px !important;
padding: 0px;
}
.hljs ul li {
list-style: decimal-leading-zero;
border-left: 1px solid #ddd !important;
background: #fff;
padding: 5px!important;
margin: 0 !important;
line-height: 14px;
word-break: break-all;
word-wrap: break-word;
}
.hljs ul li:nth-of-type(even) {
background-color: #fcfcfc;
color: inherit;
}
完成以上操作就可以了。
页:
[1]