KindEditor4.1.4代码高亮显示设置

来源：互联网发布：怎么跟淘宝客服讲价编辑：程序博客网时间：2024/05/20 01:46

在线编辑器KindEditor很强大，但是默认没有开启代码高亮功能。网上找到了一些方法。

1.后台还需要加载prettify.js和prettify.css

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

编辑器初始化设置后，在里面加cssPath(注意路径)和prettyPrint()

KindEditor.ready(function(K) {window.editor = K.create('#editor_id',{cssPath:'editor/plugins/code/prettify.css',resizeType:0,items:[        'undo', 'redo', '|','selectall','cut', 'copy', 'paste','plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull','|','insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',        'superscript', '|','clearhtml', 'quickformat', 'removeformat', '|', 'source','preview','fullscreen', '/',        'formatblock', 'fontname', 'fontsize', '|','forecolor', 'hilitecolor', 'bold','italic', 'underline', 'strikethrough', 'lineheight',  '|','code','image','table', 'hr', 'emoticons', 'baidumap', 'pagebreak', 'anchor', 'link', 'unlink']});prettyPrint();});

2.前端要显示，添加如下代码

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

代码显示默认不会换行，若要换行，需要在plugins/code下的prettify.css中添加以下内容

pre.prettyprint {width: 630px;//代码宽度margin: 1em auto;padding: 1em;white-space: pre-wrap;}

1 0