KindEditor4.1.11编辑器开启prettify代码高亮显示

KindEditor 4.1.11网页在线编辑器功能很完善，也没有百度编辑器UEditor等一些画蛇添足的问题，但是默认没有开启代码高亮功能，KindEditor 4.1.11是默认自带了prettify代码高亮显示插件的，只要把配置打开即可。

1、后台编辑器配置，后台这里没必要引用JS文件开启代码高亮显示，这里只引用prettify功能与CSS做代码段区别显示，在相关页面kindeditor JS代码段后添加：

<script>
  KindEditor.ready(function(K){
    window.editor = K.create('#content',{cssPath:'include/kindeditor/plugins/code/prettify.css',filterMode:false});
  });
</script>

其中plugins/code/下prettify.css文件做如下修改：

pre.prettyprint{
	border:0;
	border-left:3px solid #2F4056;
	background-color:#f2f2f2;
	margin-left:2em;
	padding:0.5em;
	font-size:90%;
	display:block;
	font-family:"Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	margin:1em 0px;
	white-space:pre-wrap;	/* 支持换行显示 */
}

开启prettify.js代码行号显示，修改kindeditor\kindeditor.js文件，搜索“prettyprint”在后面添加 linenums 样式风格，修改后如图：

2、前台展示页面配置。引用prettify.js并初始化：

<script src="include/kindeditor/plugins/code/prettify.js" type="text/javascript"></script>
<script>prettyPrint();</script>

并在网站风格中增加prettify样式，当然也可以直接引用prettify.css文件：

/*** 代码高亮 ***/
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0;color:#d2d2d2;}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
pre.prettyprint {
	border: 0;
	border-left:3px solid #2F4056;
	background-color:#f2f2f2;
	width:650px;
	margin-left:2em;
	padding:0.5em;
	font-size:90%;
	line-height:1.5em;
	display:block;
	font-family:"Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
	margin:1em 0px;
	white-space:pre-wrap;
}
.prettyprint ol li{list-style:decimal-leading-zero inside;}

其中增加了linenums行号显示颜色与自动换行，宽度可自行定义。