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

发布时间:2015-07-14 11:05 | 人气数:959

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行号显示颜色与自动换行,宽度可自行定义。
文件主题KindEditor4.1.11编辑器开启prettify代码高亮显示 文件大小:1143KB下载链接
文件关键词:KindEditor编辑器,prettify,代码高亮显示,prettify配置,KindEditor配置