jQuery编辑器KindEditor4.1.4代码高亮显示设置教程

接下来介绍下编辑器KindEditor4.1.4代码高亮显示设置：加载需要的JS和CSS文件/编辑器初始化设置后，在里面加prettyPrint等等，感兴趣的你可以参考下本文

编辑器KindEditor官网： http://www.kindsoft.net/

1、需要加载的JS和CSS文件为：

2、编辑器初始化设置后，在里面加prettyPrint()：

 
KindEditor.ready(function (K) { 
window.EditorObject = K.create('#txtBody', { 
cssPath: 'plugins/code/prettify.css', 
resizeType: 1, 
allowPreviewEmoticons: false, 
allowImageUpload: false, 
items: [ 
'code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 
'insertunorderedlist', '|', 'emoticons', 'image', 'link'] 
}); 
prettyPrint(); 
}); 

假如要高亮的代码一开始是隐藏的，要显示出来，则需要调用prettyPrint();

复制代码代码如下:

 
function Show(i) { 
var id = '#divBody' + i; 
if($(id).is(":hidden")){ 
$('#divIntro' + i).hide(); 
$(id).slideDown(); 
$(id).next("a").text("收缩..."); 
prettyPrint(); 
} 
else{ 
$('#divIntro' + i).show(); 
$(id).slideUp(); 
$(id).next("a").text("详细..."); 
} 
} 

3、默认代码是不换行的，要自动换行可以修改prettify.css，把white-space原来的值pre修改为pre-wrap：

复制代码代码如下:

 
pre.prettyprint { 
border: 0; 
border-left: 3px solid rgb(204, 204, 204); 
margin-left: 2em; 
padding: 0.5em; 
font-size: 110%; 
display: block; 
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 
margin: 1em 0px; 
white-space: pre-wrap; /* 原来的值是 pre;*/ 
} 

以上就是jQuery编辑器KindEditor4.1.4代码高亮显示设置教程的详细内容，更多请关注0133技术站其它相关文章！