百度编辑器(UEditor)结合highlight.js实现代码高亮显示

使百度编辑器代码高亮的方法

首先到官网去下载这个插件：https://highlightjs.org/download/

下面写一个例子来使用highlight.js实现代码高亮显示：

（这里引入的是我csdn用的同款主题：tomorrow-night-eighties）

<link rel="stylesheet" href="https://csdnimg.cn/release/blog_editor_html/release1.3.9/ckeditor/plugins/codesnippet/lib/highlight/styles/tomorrow-night-eighties.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

代码高亮遵循的格式是：<pre><code>你的代码</code></pre>

而百度编辑器默认的代码块显示格式为：<pre>你的代码</pre>

于是下面这段js代码诞生了，循环往pre标签里添加code标签

<script type="text/javascript">
    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 = '<code id="mycode">'+mycode+'</code>';
    }
</script>

我们还可以给代码块自定义样式，例如：代码块宽度、字体大小、行高、不强制换行等等

<style type="text/css">
#mycode{
font-size: 18px;
width:500px;
white-space: pre; /*不强制换行*/
}
</style>