高级技术员细说highlight.js 增加行数 （codesnippet插件添加行号）
时间：2022-01-19 11:32:36|来源：网络精心整理
addslashes(addslashes(addslashes(最近升级了ckeditor编辑器，添加了codesnippet（代码高亮插件），这里不介绍codesnippet的使用方法了，大家可以自行百度，这类教程非常的多
codesnippet是一款基于 highlight.js 代码高亮插件，但是默认不显示行号行数的，由于我之前使用的插件是显示的，所以还了以后感觉非常别扭，于是就尝试在百度了找了一下，发现还真没有有效的解决办法，于是就自己动手吧，其实非常简单，我先说一下我的思路。
首先吧代码片中的换行（ ）都替换成 </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;
}
完成以上操作就可以了。
)))
上一篇：没有了
下一篇：高级技术员细说layui select 禁止点击的实现方法
本文标题：高级技术员细说highlight.js 增加行数 （codesnippet插件添加行号）
本文地址：https://www.tabangni.com/jsstudy/211.html
查看更多与“highlight.js”有关的文章
推荐阅读
- 1高级技术员细说highlight.js 增加行数 （codesnippet插件添加行号）
- 2高手阐明bootstrapValidator.min.js表单验证插件
- 3高级技术员细说微信小程序修改swiper默认指示器样式的实例代码
- 4图文阐明js事件on动态绑定数据,绑定多个事件的方法
- 5初级技术员讲诉JavaScript构建自己的模板小引擎示例
- 6初级技术员指导详解微信小程序网络请求接口封装实例
- 7初级技术员指导js操作二级联动实现代码
- 8专业技术员传授使用javascript过滤html的字符串(注释标记法)
- 9高手说明javascript中处理时间戳为日期格式的方法
- 10技术大牛讲解js仿支付宝多方框输入支付密码效果
最近更新
- 01-19高级技术员细说highlight.js 增加行数 （codesnippet插件添加行号）
- 01-19高手阐明bootstrapValidator.min.js表单验证插件
- 01-19高级技术员细说微信小程序修改swiper默认指示器样式的实例代码
- 01-19图文阐明js事件on动态绑定数据,绑定多个事件的方法
- 01-19初级技术员讲诉JavaScript构建自己的模板小引擎示例
- 01-19dedecms 分页标题提取方法
- 01-19CentOS7下如何切换运行级别?CentOS7下切换运行级别的方法
- 01-19初级技术员指导详解微信小程序网络请求接口封装实例
- 01-19初级技术员指导js操作二级联动实现代码
- 01-19SQLServer中数据库文件的存放方式，文件和文件组