• 微信号
您当前的位置:首页 > 学海无涯 > 帝国cms>帝国7.5cms系统编辑器(codesnippet)插件实现高亮代码后为其添加行号的方法

帝国7.5cms系统编辑器(codesnippet)插件实现高亮代码后为其添加行号的方法

陵小宇 2021-12-16 人阅读

在我们使用codesnippet插件实现高亮代码后,但有又发现,不太美观和不便于查看,于是就给高亮代码加上行号,本文就说一说,怎么给code snippet添加行号。

思路:使用js代码增加给高亮代码增加ul和li的无序列表结构,实现行。

步骤一:添加js代码

把以下代码添加到内容模板文件的head之中js文件中,使用js文件引入;

$(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库下面,否则不起作用

步骤二:在高亮代码样式中写入css代码

.hljs { 
    display: block; 
    padding: 0.5em 0 0.5em 0.5em; 
    background: #fff; 
    border: solid 1px #DEE1E6; 
    border-radius: 3px; 
    white-space: pre-wrap; 
    word-break: break-all; 
} 
/*add line number start*/ 
.hljs ul { 
    margin-left: 40px; 
} 
.hljs ul li { 
    border-left: solid 1px #DEE1E6; 
    padding: 3px; 
    list-style: decimal-leading-zero;/*0开头的数字标记。(01, 02, 03, 等。)*/ 
} 
.hljs ul li:nth-child(even) {/*偶数行的背景颜色*/ 
    background-color: #F7F7F7; 
} 
/*add line number end*/ 
 

注意注意事项:我用的高亮样式是monokai_sublime,大家把我的代码复制过去只用修改颜色就行了。

转载:感谢您对陵小宇个人博客网站平台的认可,非常欢迎各位朋友分享到个人站长或者朋友圈,但转载请说明文章出处“来源陵小宇个人博客-一个生活分享和记录随笔的个人网站”。https://www.lingyublog.com/diguocms/9.html

如果侵犯了你的权益请来信告知我们删除。邮箱:lingyu314269@qq.com