JQuery editor KindEditor4.1.4 code highlight setting tutorial

Editor KindEditor Official Website: http://www.kindsoft.net/

1. The JS and CSS files to be loaded are:
Copy codeThe Code is as follows:
<Script src = "kindeditor-4.1.4/kindeditor. js" type = "text/javascript" charset = "UTF-8"> </script>
<Script src = "kindeditor-4.1.4/plugins/code/pret.pdf. js" type = "text/javascript"> </script>
<Link href = "kindeditor-4.1.4/plugins/code/prettify.css" rel = "stylesheet" type = "text/css"/>

2. After the editor initialization settings, add prettyPrint () to the Editor ():
Copy codeThe Code is as follows:
KindEditor. ready (function (K ){
Window. EditorObject = K. create ('# txtBody ',{
CssPath: 'ins INS/code/prettify.css ',
ResizeType: 1,
AllowPreviewEmoticons: false,
AllowImageUpload: false,
Items :[
'Code', 'fontname', 'fontsize', '|', 'forecolor', 'hilitcolor', 'bold ', 'italic', 'underline ',
'Removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist ',
'Insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
PrettyPrint ();
});

If the code to be highlighted is hidden at the beginning, you need to call prettyPrint ();
Copy codeThe Code is as follows:
Function Show (I ){
Var id = '# divBody' + I;
If ($ (id). is (": hidden ")){
$ ('# DivIntro' + I). hide ();
$ (Id). slideDown ();
$ (Id). next ("a"). text ("contract ...");
PrettyPrint ();
}
Else {
$ ('# DivIntro' + I). show ();
$ (Id). slideUp ();
$ (Id). next ("a"). text ("detailed ...");
}
}

The 3rd percentile code is not a line change. To automatically change the line, you can modify prettify.css and change the original white-space value pre to pre-wrap:Copy codeThe Code is as follows:
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;/* The original value is pre ;*/
}