帝国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库下面，否则不起作用。

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

.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*/

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

示例如下：
codesnippet添加行号后的效果
本文参考文章：疆飞个人博客 https://www.jiangfei.net/jianzhan/1098.html

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

魏义齐全栈技术交流：