工作室注册登录标签云赞助光荣榜

当前位置:首页 > 全栈分享 > 帝国cms > 正文

帝国cms编辑器集成codesnippet代码高亮插件后为其添加行号的方法

发布时间:2019-05-03 23:31:09作者:魏义齐阅读:()评论:

本文为博主原创文章,未经博主允许不得转载。

文章“帝国cms解决代码高亮方法二”虽然实现了给帝国cms CKeditor编辑器集成code snippet代码高亮插件,但是这个插件是没有行号的,没有行号总感觉不是很好,可能是跟我博客站的代码高亮效果相比有落差吧,本文就来说说如何给code snippet添加行号。

第一步:把下面这段js代码以引入的方法写在<head></head>之间

$(function () {
	$("code").each(function () {
		$(this).html("<ul id=\'codeblock'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
	});
});

注意事项1.一定要以引入的方式,不能直接写在模板里,因为帝国cms会转义反斜杠,写在模板里会导致代码分行错乱;2.一定要引入在网站的jquery库下面,否则不起作用。

第二步:在高亮样式里写入以下代码:

  1. .hljs { 
  2.     displayblock
  3.     padding0.5em 0 0.5em 0.5em
  4.     background#fff
  5.     bordersolid 1px #DEE1E6
  6.     border-radius: 3px
  7.     white-space: pre-wrap; 
  8.     word-break: break-all
  9. /*add line number start*/ 
  10. .hljs ul { 
  11.     margin-left40px
  12. .hljs ul li { 
  13.     border-leftsolid 1px #DEE1E6
  14.     padding3px
  15.     list-styledecimal-leading-zero;/*0开头的数字标记。(01, 02, 03, 等。)*/ 
  16. .hljs ul li:nth-child(even) {/*偶数行的背景颜色*/ 
  17.     background-color#F7F7F7
  18. /*add line number end*/ 

注意事项:我用的高亮样式是foundation.css,大家把我的代码复制过去只用修改颜色就行了,其中white-space: pre-wrap; word-break: break-all;的解释详见文章“帝国cms解决代码高亮方法二”末尾的补充说明。

示例如下:

codesnippet添加行号后的效果

本文参考文章:疆飞个人博客 https://www.jiangfei.net/jianzhan/1098.html

本文标签帝国cms代码高亮 ,您可以阅读与「帝国cms代码高亮 」相关的所有文章

魏义齐全栈技术交流:魏义齐全栈技术交流

相关阅读

    无相关信息

上一篇:帝国cms列表模板列表式分页美化下一篇:公布一个由畅言自适应版代码和帝国cms转义反斜杠共同组成的bug

原创不易,您的赞助就是博主更新的动力!

赞助请备注,8.88元及以上可在赞助光荣榜留下外链信息。

HashOver畅言云评完全自托管的评论系统

工作室注册登录标签云赞助光荣榜

最新会员
  • 东方星雨
  • deanhan
  • 1264822519
  • aini3311
  • a1051020101
  • weiyiqi