代码高亮插件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; }
(资源库 www.zyku.net)
上一篇:CKEditor编辑器上传图片禁止自动设置宽高的方法
栏 目:工具资源
下一篇:CKEditor常用配置属性整理
本文地址:https://www.zyku.net/gongju/1579.html
您可能感兴趣的文章
- 06-26highlightjs网页代码高亮插件调用方法
- 06-24SyntaxHighlighter网页代码高亮插件build构造方法
- 11-30CKEditor 4.x 代码高亮插件SyntaxHighlighter和Code S
- 11-30SyntaxHighlighter代码高亮插件构建使用方法
- 09-23ios15记录app活动设置方法分享
- 11-01OPPOreno7怎么设置返回键
- 03-17PHP中类的自动加载的方法
- 12-22iphone11查看剩余内存方法一览
- 03-16oppoa95设置导航键步骤教程
- 03-05帝国CMS列表分页[!---show.listp
- 02-10Python 内置函数速查表一览
- 02-22小米11pro证件照功能使用方法
- 10-11vivox70pro+在哪开启应用隐藏
- 02-14红米手机智能识别陌生电话设置方法
- 02-25真我gtneo应用隐藏设置方法
- 07-05Linux userconf命令
- 02-13教你用Python3+mysql8.0搭建Django框
- 02-14小米k30s设置一键关闭广告功能
- 08-12支付宝开具交易流水证明教程
- 03-16红米note10pro流量限制功能设置方法
最近更新
阅读排行
猜你喜欢
- 07-05Linux tty命令
- 04-17bower ESUDO Cannot be run with sudo
- 10-22京东双十一热爱环游记规则介绍
- 02-08oppo私密保险箱功能使用教程
- 12-29老马学堂-老马学堂应用软件功能介绍
- 11-02OPPOreno7pro录屏方法汇总
- 03-14miui13系统开启控制中心方法
- 12-01procreate pocket新建调色板方法介绍
- 03-31公众号关联小商店操作方法
- 03-25荣耀v40智能分辨率设置方法