开启KindEditor代码高亮功能

最新推荐文章于 2021-06-09 12:00:32 发布

转载最新推荐文章于 2021-06-09 12:00:32 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yq-Hua/p/5540846.html

文章标签：

#javascript #ViewUI

本文详细介绍如何在KindEditor4.0中使用插入代码功能，实现前后台代码高亮显示。通过引入特定的CSS和JS文件，以及使用prettyPrint()函数，可使代码展示更加清晰。同时，文章还提供了调整样式以解决显示问题的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

KindEditor4.0 开始支持插入代码功能！！！如何使用插入代码功能实现前段页面代码高亮显示和后台代码维护显示！！！

1. 需要高亮显示代码的前台页面需要引用相应的css样式和js文件

<link href="../../editor/plugins/code/prettify.css" rel="stylesheet" />
<script type="text/javascript" src="../../editor/plugins/code/prettify.js"></script>

2. 插入脚本

<script type="text/javascript">
    $(function () { prettyPrint(); });
</script>

这样前台页面就可实现类似这样效果的代码显示了！

之后，还可以根据自己的喜好，对现有前台样式进行调整，比如我的前台样式会引发横向滚动条显示不出来，这样就导致超长行的代码显示不全的问题。

我修改了对应的prettify.css 文件，将该文件里的pre.prettyprint 样式追究了一个overflow:auto 即可....

but，后台编辑器维护里面还没有插件样式，这样就导致编辑器中插入的代码跟普通文字一样，无法区分开！所以可使用如下方式对后台编辑器里的显示进行调整。

var editor = KindEditor.create('textarea.editor', {
    cssPath : ['[kePath]/plugins/code/prettify.css']
});

这样后台编辑器就可以实现如下所显示的效果了：

转载于:https://www.cnblogs.com/yq-Hua/p/5540846.html