菜单
展开边栏 收起边栏

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;
}

完成以上操作就可以了。
 

Copyright © 2008-. JiangFei.net all rights reserved 浙ICP备09000456号