这两天看着自己的网站上的代码跟文字混在一起一样的颜色非常的不爽，于是就想搞个代码高亮插件。我的网站用的是百度编辑器UEditor，百度一下发现网上很多的教程，就尝试着试试。
总结以下网上资料的两种方法，一种是CSDN上和腾讯云上的一篇文章，是在需要代码高亮的页面引入highlight.js插件，然后用js插件遍历文章中的<pre>标签。
批量给<pre>标签里面加上<code>标签，因为百度编辑器默认的代码插件只有<pre>标签，没有<code>标签。尝试了CSDN上的那个仁兄的方法之后发现无效，他提供的那个js压根儿就不会给批量给<pre>标签里面加上<code>标签。可能是我没有引入库文件或者代码冲突还是时间长了失效了。具体原因不清楚，所以这个方法就弃用了。
另外一种方法是改造百度编辑器的配置文件，让编辑器插入代码<pre>标签时加上<code>标签，我也按照教程尝试了，发现也不行。不生效。估计是百度编辑器版本和他教程里的不一样。
准备放弃了，换一个叫rainbow的代码高亮插件，发现这个插件代码高亮直接<pre>标签就行。但是如果不套上<code>标签的话很多样式都不好看。这时候突然灵光乍现，既然rainbow可以直接识别<pre>标签给代码高亮，那highlight.js应该也可以啊。
于是研究了下highlight.js文件，把里面判断<code>标签的地方给去掉了，只留<pre>标签，尽然神奇的成功了。困扰了2天的问题，尽然5分钟解决了。
下面总结下百度编辑器代码高亮的正确的使用方法步骤；
1. 去highlight.js官方下载插件，这个很简单百度highlight就可以了。
2. 把插件放到你的网站目录里，放哪里都行，你记得就OK。
3. 引用highlight.js插件和代码样式，具体看下面的代码参考。
<html> <head> <script type="text/javascript" src=".js//highlight.pack.js"></script> //引入代码高亮插件 <link rel="stylesheet" type="text/css" href=".style/gml.css" media="screen"/> //引入高亮代码样式 <script>hljs.initHighlightingOnLoad();</script> //执行代码高亮 </head> <body> <pre class="brush:html;toolbar:false hljs xml"> <h1>琵琶行</h1> <p> 感我此言良久立， 却坐促弦弦转急。 凄凄不似向前声， 满座重闻皆掩泣。 座中泣下谁最多？ 江州司马青衫湿。 </p> <p>今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。</p> </pre> </body> </html>
我通过以上代码实现了百度编辑器代码高亮，如果你需要的话拿去用吧，这个方法目前亲测可用。但是用使用我改造过的highlight.js高亮插件，需要的点击下载拿去吧。
如果内容有帮助，就点个赞吧！