 
<script src="kindeditor-4.1.4/kindeditor.js" type="text/javascript" charset="utf-8"></script> 
<script src="kindeditor-4.1.4/plugins/code/prettify.js" type="text/javascript"></script> 
<link href="kindeditor-4.1.4/plugins/code/prettify.css" rel="stylesheet" type="text/css" /> 

2、編輯器初始化設(shè)置后，在里面加prettyPrint()：

復(fù)制代碼代碼如下:

 
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(); 
}); 

假如要高亮的代碼一開始是隱藏的，要顯示出來(lái)，則需要調(diào)用prettyPrint();

復(fù)制代碼代碼如下:

 
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("詳細(xì)..."); 
} 
} 

3、默認(rèn)代碼是不換行的，要自動(dòng)換行可以修改prettify.css，把white-space原來(lái)的值pre修改為pre-wrap：

復(fù)制代碼代碼如下:

 
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; /* 原來(lái)的值是 pre;*/ 
} 

您可能感興趣的文章:

相關(guān)文章

jquery文字填寫自動(dòng)高度的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jquery文字填寫自動(dòng)高度的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2016-11-11
jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼
這篇文章主要介紹了jQuery多文件異步上傳帶進(jìn)度條實(shí)例代碼,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-08-08
用jquery實(shí)現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了用jquery實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
jQuery滑動(dòng)效果實(shí)現(xiàn)方法分析
這篇文章主要介紹了jQuery滑動(dòng)效果實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)滑動(dòng)效果常用的slideDown()、slideUp()及slideToggle()方法相關(guān)使用技巧,需要的朋友可以參考下
2018-09-09
jQuery實(shí)現(xiàn)的頁(yè)面彈幕效果【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的頁(yè)面彈幕效果,涉及jQuery事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2018-08-08
基于jquery實(shí)現(xiàn)的銀行卡號(hào)每隔4位自動(dòng)插入空格的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于jquery實(shí)現(xiàn)的銀行卡號(hào)每隔4位自動(dòng)插入空格的實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-11-11
在IE 瀏覽器中使用 jquery的fadeIn() 效果英文字符字體加粗
在IE 瀏覽器中使用 jquery的fadeIn() 效果英文字符字體加粗的解決方法分享。
2011-06-06
JQuery選擇器詳解
這篇文章主要為大家介紹了JQuery選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2021-12-12
jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts繪制2D柱狀圖和折線圖的組合圖效果,結(jié)合完整實(shí)例形式分析了jQuery使用插件FusionCharts載入xml格式數(shù)據(jù)繪制柱狀圖與折線圖組合圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-04-04
jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層完整代碼
使用jQuery實(shí)現(xiàn)可拖動(dòng)的浮動(dòng)層的完整代碼，復(fù)制保存到html文件就可以體驗(yàn)效果.光標(biāo)移動(dòng)到層上，按住鼠標(biāo)就可以拖動(dòng)層
2013-05-05