kindeditor在编辑器时使代码高亮显示区分代码

实现功能的原因：当我们在后台发布文章时可能都会遇到一个问题，就是我们插入代码时会把代码内容与其他部分搞混！可能有一段文字跑到代码部分的pre标记中我们浑然不知，如果你的前台页面有代码高亮效果的话，那么你会发现有段不是代码的文字也被显示成代码了。

解决方法：由于我使用的是kindeditor，所以就讲一下使用kindeditor在编辑时就显示代码效果。

在我们初始化kindeditor的时候，只需要加入一行代码即可

cssPath : '[kindeditorPath]/plugins/code/prettify.css',

当我们加入这行代码之后，你就会发现，当我们输入代码时代码部分会显示不同的背景色，以便我们区分代码。

但是博主我又遇到了一个问题：我使用的不是kindeditor内置的代码高亮插件，而是ueditor的代码高亮插件，加入上述代码根本没有效果！！！所以我就在网上找了一下，发现我和开源中国的情况类似，所以就借鉴了一下开源中国的css代码：

以下css代码出自开源中国：

.ke-content { font-size: 10pt;
}
.ke-content pre { font-size:9pt; font-family:Courier New,Arial; border:1px solid #ddd; border-left:5px solid #6CE26C; background:#f6f6f6; padding:5px;
}
.ke-content code { margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #DDD; background-color: #F6F6F6; border-radius: 3px;
}
.ke-content pre>code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent;
}
.ke-content pre code { background-color: transparent; border: none;
}
.ke-content p { margin: 0 0 15px 0; margin-bottom:15pt; line-height:1.5; letter-spacing: 1px;
}
.ke-content div.ref {border:1px solid #ddd;margin:0 0 10px 0;padding:2px;font-size:9pt;background:#ffe;}
.ke-content div.ref h4 {margin:0;padding:1px 3px;background:#CC9966;color:#fff;font-size:9pt;font-weight:normal;}
.ke-content div.ref .ref_body {margin:0;padding:2px;line-height:20px;color:#666;font-size:9pt;}
.ke-content blockquote {margin:15px 10px;border:2px solid #eee;padding:5px 5px 5px 35px;background:#f4f5f7 url('../img/blockquote.gif') no-repeat left top;color:#060;font-size:9pt;}

把上面的css代码代码放到一个css文件中，然后cssPath路径指向这个css文件路径就可以了~~