开启KindEditor代码高亮功能

Posted 2020-07-16 yq_Hua

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‘]
});

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

【多谢支持】本文转载自本人个人网站持恒网：http://51chiheng.com/article/show-1060.html