YZMCMS使用百度编辑器结合Highlightjs实现代码高亮

默认的编辑器不带代码高亮的功能，和大家分享下如何实现代码高亮，第二种方法就是结合Highlightjs实现代码高亮，参考了CSDN中一位老哥的文章https://blog.csdn.net/msllws/article/details/81048390自己又优化了一下其实很简单，文章末尾有样式附件

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

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

高亮的基本标签嵌套是pre中包含code，但是默认的只有pre标签，我们这里需要添加code标签，新建JS文件写入

    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: 5px 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;
}
pre{
  outline: 0px;
    zoom: 1;
    margin-top: 20px;
    margin-bottom: 0px;
    padding: 10px;
    border: 1px solid rgb(204, 204, 204);
    background-color: rgb(249, 249, 249);
    font-family: "Courier New", Courier, Arial;
    font-size: 12px;
    line-height: 18px;
    color: rgb(51, 51, 51);
    white-space: pre-wrap !important;
    overflow-wrap: break-word !important;
    border-radius: 10px;
}

1547644008.rar

下载完毕后，记得在show页面引入，这两个文件和Highlightjs的css样式和JS，少一步都会出错，引入后还需要初始化一下：

<script>hljs.initHighlightingOnLoad();</script>

添加li标签，显示序号

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