软件下载 > 开发工具 > 编程工具 > KindEditor使用技巧 > 解决kindeditor里面的代码高亮不显示序号的问题

解决kindeditor里面的代码高亮不显示序号的问题

软件分类:编程工具大小:782 KB时间:2023-06-21
软件介绍:KindEditor是在国内非常流行的开源HTML编辑器,KindEditor本次版本最重要的改进是直接兼容IE9,zol为您提供kindeditor编辑器下载。

我使用KindEditor自带的代码插件时,发现代码块前没有行号,看起来不太习惯。加上行号后,整体结构更清晰,阅读也更方便,因此我希望为其添加行号功能。该代码高亮功能的实现依赖于JavaScript和CSS,其核心代码源自谷歌的开源项目Google Code Prettify,通过引入其资源实现了语法高亮效果。

1、 打开kindeditor的/plugins/code/code.js文件,找到相关代码部分,此处为作者调用google-code-prettify的位置。在第49行,作者未添加linenums样式,导致代码行号未能正常显示。只需在该行代码中补充linenums类或参数,即可实现行号功能,操作简单,修改后保存并刷新页面即可生效。

解决kindeditor里面的代码高亮不显示序号的问题

2、 当代码被包裹在pre标签中,并在样式里包含linenums时,prettify.js在渲染过程中会自动为其添加行号。关键在于理解代码高亮工具的解析机制与标签样式的匹配规则,从而实现行号的正确生成与显示。

解决kindeditor里面的代码高亮不显示序号的问题

3、 重新发帖测试一下,之前代码块未显示行号,是由于生成的pre标签缺少linenums样式,code.js并未自动添加该样式,需手动调整。

4、 仅对新发布的帖子生效!

解决kindeditor里面的代码高亮不显示序号的问题

文章标题:解决kindeditor里面的代码高亮不显示序号的问题

文章链接://www.hpwebtech.com/jiqiao/333930.html

为给用户提供更多有价值信息,ZOL下载站整理发布,如果有侵权请联系删除,转载请保留出处。

KindEditor软件简介

KindEditor是在国内非常流行的开源HTML编辑器,KindEditor本次版本最重要的改进是直接兼容IE9,在IE9上无需加入X-UA-Compatible META标签,zol为您提供kindeditor下载。软件基础简介KindEditor官方版是在国内非常受欢迎的HTML在线编辑器,KindEditor官方版可以让用户在网站上获得所见即所得编辑效果,开发人员可以... 详细介绍»