百度编辑器如何结合Highlightjs实现代码高亮

PHPCMS默认的编辑器已经换成了百度编辑器具体请参考PHPCMS后台编辑器更换为百度编辑器这篇文章，但是在编辑中粘贴了代码然后查看发现并没有代码高亮，具体如何做请参考以下内容，这里有两种方法：

第一种是使用百度编辑器自带的高亮：

在内容页引入以上代码就可以了，但是发现有点丑，就放弃了这种方法

第二种方法就是结合Highlightjs实现代码高亮

首先下载插件，官网地址是https://highlightjs.org/download/ 下载后我们只需要两个文件，就是style文件夹和JS文件

然后复制到statics\js\ueditor\third-party\SyntaxHighlighter这里的具体目录可以自己指定，接下来就是引入tomorrow-night-eighties.css和highlight.pack.js，当然CSS文件你可以引入其他主题的CSS

循环往pre标签里添加code标签

 var allpre = document.getElementsByTagName("pre");
    for(i = 0; i < allpre.length; i++) 
    {
        var onepre = document.getElementsByTagName("pre")[i];
        var mycode = document.getElementsByTagName("pre")[i].innerHTML;
        onepre.innerHTML = ''+mycode+'';
    }

$("code").each(function(){
	  $(this).html("" + $(this).html().replace(/\n/g,"\n") +"\n");
	});

接下来就是美化一下样式，我使用的是以下样式，给大家一个参考

.hljs {
	display: block;
	overflow-x: auto;
	padding: 15px 0.5em;
	background: #23241f;
	font-size: 12px;
	border: 0;
	font-family: "Consulas", "Courier New", Courier, mono, serif;
	margin: 0;
	width: 100%;
	font-weight: 200;
color:  white-space: pre-wrap;
	box-sizing: border-box;
}
.hljs, .hljs-tag, .hljs-subst {
	color: #f8f8f2;
}
.hljs-strong, .hljs-emphasis {
	color: #a8a8a2;
}
.hljs-bullet, .hljs-quote, .hljs-number, .hljs-regexp, .hljs-literal, .hljs-link {
	color: #ae81ff;
}
.hljs-code, .hljs-title, .hljs-section, .hljs-selector-class {
	color: #a6e22e;
}
.hljs-strong {
	font-weight: bold;
}
.hljs-emphasis {
	font-style: italic;
}
.hljs-keyword, .hljs-selector-tag, .hljs-name, .hljs-attr {
	color: #f92672;
}
.hljs-symbol, .hljs-attribute {
	color: #66d9ef;
}
.hljs-params, .hljs-class .hljs-title {
	color: #f8f8f2;
}
.hljs-string, 
.hljs-type, 
.hljs-built_in, 
.hljs-builtin-name, 
.hljs-selector-id, 
.hljs-selector-attr, 
.hljs-selector-pseudo, 
.hljs-addition, 
.hljs-variable, 
.hljs-template-variable {
	color: #e6db74;
}
.hljs-comment, .hljs-deletion, .hljs-meta {
	color: #75715e;
}
.hljs ul {
	list-style: decimal;
	margin: 0px 0px 0 40px !important;
	padding: 0px;
}
.hljs li {
	list-style: decimal-leading-zero;
	border-left: 1px solid #111 !important;
	padding: 2px 5px!important;
	margin: 0 !important;
	line-height: 14px;
	width: 100%;
	box-sizing: border-box;
}
.hljs li:nth-of-type(even) {
	background-color: rgba(255,255,255,.015);
	color: inherit;
}

到此为止，代码已经高亮了，如果有什么问题，欢迎大家在下方评论，会及时的回复大家。