实现功能的原因：当我们在后台发布文章时可能都会遇到一个问题，就是我们插入代码时会把代码内容与其他部分搞混！可能有一段文字跑到代码部分的pre标记中我们浑然不知，如果你的前台页面有代码高亮效果的话，那么你会发现有段不是代码的文字也被显示成代码了。
解决方法：由于我使用的是kindeditor，所以就讲一下使用kindeditor在编辑时就显示代码效果。
在我们初始化kindeditor的时候，只需要加入一行代码即可

cssPath : '[kindeditorPath]/plugins/code/prettify.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;}