欢迎来到资源库(www.zyku.net)

工具资源

当前位置:首页 > 网站运营 > 工具资源 > 代码高亮插件

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

时间:2018-01-10|栏目:工具资源|点击:|我要投稿

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

(资源库 www.zyku.net)

上一篇:CKEditor编辑器上传图片禁止自动设置宽高的方法

栏    目:工具资源

下一篇:CKEditor常用配置属性整理

本文标题:代码高亮插件codesnippet添加行号的方法

本文地址:https://www.zyku.net/gongju/1579.html

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务