在我们的项目中经常会用到富文本编辑器，网上也有很多这样的工具，这里我以百度编辑器为例给大家做演示，网上很多文章讲的就使用百度编辑器里自带的高度功能解决，但我经过测试并不能解决代码高亮显示的问题，网上也找了很多关于HighlightJs的文章，方法也都差不多，反正在我站上没有体现效果，所以决定采用自己的办法来处理，首先自然是下载HighlightJs和采用CDN引入HighlightJs的支持文件如下：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.18.1/highlight.min.js"></script>

大家也可以把文件下载到本地，然后从本地载入这两个文件，然后进行代码初始化使HighLightJs生效，代码如下：

<script type="text/javascript">
	hljs.configure({
		tabReplace: '    ', // 4 spaces
		languages: ['javascript', 'java', 'python','html']
		});
		hljs.initHighlightingOnLoad();
</script>

至此，当我们预览文章的时候发现，高度效果并没有显示出来，这是因为HighlighJs需要对<pre><code>代码才能进行格式化高亮显示，而百度Ueditor编辑器会自动过滤掉<code>代码，也就是说要解决这个问题需要在文章页的<pre>里面动态添加<code>代码后再高度显示，第二种办法就是直接修改百度Ueditor编辑增加<code>代码，第一种方法网上有很多文章，这里我直接修改百度编辑器的文件增加<code>代码如下：

ueditor.all.js大概第13314行修改成：

me.execCommand('inserthtml','<pre id="coder"class="brush:'+lang+';toolbar:false"><code>'+code+'</code></pre>',true);

Ueditor.min.js找到id="coder"这段代码，在代码段里修改成如下：

c.execCommand("inserthtml",'<pre id="coder"class="brush:'+b+';toolbar:false"><code>'+f+"</code></pre>",!0)

有些朋友可能还需要修改<code>的CSS属性，所以我们还可以在ueditor.config.js的,whitList: {段增加code的CSS白名单以便保护class和style属性如下：

code:   ['class', 'style'],

好了，大功告成，把文件上传至服务器，记得刷新缓存，不然可能不会有效果，然后看看效果吧！