帝国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*/