html代码高亮带行号,代码高亮插件codesnippet添加行号的方法

codesnippet是一款基于 highlight.js 代码高亮插件，但默认是不显示行号行数的，所以看起来还是挺别扭的，下面来实现添加行号的方法：

首先把代码片中的换行(\n)都替换成

, 然后在代码内容的前面添加

• , 而最后 添加

,这样以来，代码就被每行隔开了，然后通过css添加行数，就非常简单了。

下面看具体实现的方法：

1、先添加一段JS ，就是实现我上述方法的JS(不能添加在highlight.js内，因为此方法并非使用highlight.js函数来完成的)

//代码高亮自定义

$("code").each(function(){

$(this).html("

• " + $(this).html().replace(/\n/g,"\n
• ") +"\n

");

});

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;

}

(资源库 www.zyku.net)