highlight.js 增加行数 （codesnippet插件添加行号）

plaodj

最近升级了ckeditor编辑器，添加了codesnippet（代码高亮插件），这里不介绍codesnippet的使用方法了，大家可以自行百度，这类教程非常的多
codesnippet是一款基于 highlight.js 代码高亮插件，但是默认不显示行号行数的，由于我之前使用的插件是显示的，所以还了以后感觉非常别扭，于是就尝试在百度了找了一下，发现还真没有有效的解决办法，于是就自己动手吧，其实非常简单，我先说一下我的思路。

首先吧代码片中的换行（\n）都替换成 </li><li>, 然后在代码内容的前面添加 <ul><li>, 而最后 添加 </li></ul>,这样以来，代码就被<li></li>每行隔开了，然后通过css添加行数，就非常简单了。


下面看具体实现的方法
1/先添加一段JS ，就是实现我上述方法的JS（不能添加在highlight.js内，因为此方法并非使用highlight.js函数来完成的）

//代码高亮自定义
[mw_shl_code=javascript,true]$("code").each(function(){
  $(this).html("<ul><li>" + $(this).html().replace(/\n/g,"\n</li><li>") +"\n</li></ul>");
});[/mw_shl_code]

2/在css内添加以下内容（本文中的代码片效果是在vs.css基础上修改的，所以css例子可能只适用与该实例，需要更多效果可以自己去修改）
[mw_shl_code=css,true].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;
}[/mw_shl_code]

完成以上操作就可以了。