帝国cms编辑文章如何实现代码高亮

在文章“帝国cms编辑器更换为百度编辑器并成功实现前台代码高亮和自适应”中以更换百度编辑器的方式解决了代码高亮问题，但是文末残留了一个小问题就是有代码的文章再次编辑代码显示错乱，这个问题不管是从百度编辑器还是帝国cms方面始终没有找到解决方法，并且百度编辑器2016后就没有再更新，近期又被腾讯爆出存在严重安全漏洞，详见：https://cloud.tencent.com/developer/news/379120，所以从安全角度考虑还是不要更换帝国本身的编辑器，那么解决代码高亮只能集成第三方插件了。

第一步：下载最新版的百度编辑器（也就是1.4.3.3 PHP 版本），把third-party下面的SyntaxHighlighter文件夹复制到你网站的根目录，然后在文章页模板调用：

1. <link href="[!--news.url--]SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />  
2. <script type="text/javascript" src="[!--news.url--]SyntaxHighlighter/shCore.js"></script>  
3. <script type="text/javascript">  
4.  SyntaxHighlighter.all();  
5. </script> 

不要去找SyntaxHighlighter官方下载，下载下来没有这两个文件。

第二步：这里借用青姐整理的：

1. <pre class="brush:as3;toolbar:false">ActionScript3</pre> 
2. <pre class="brush:bash;toolbar:false">Bash/Shell</pre> 
3. <pre class="brush:css;toolbar:false;">Css</pre> 
4. <pre class="brush:cpp;toolbar:false;">C/C++</pre> 
5. <pre class="brush:cf;toolbar:false">CodeFunction</pre> 
6. <pre class="brush:c#;toolbar:false">C#</pre> 
7. <pre class="brush:delphi;toolbar:false">Delphi</pre> 
8. <pre class="brush:diff;toolbar:false">Diff</pre> 
9. <pre class="brush:erlang;toolbar:false">Erlang</pre> 
10. <pre class="brush:groovy;toolbar:false;">Groovy</pre> 
11. <pre class="brush:html;toolbar:false">Html</pre> 
12. <pre class="brush:java;toolbar:false">Java</pre> 
13. <pre class="brush:jfx;toolbar:false">JavaFx</pre> 
14. <pre class="brush:js;toolbar:false">javascript</pre> 
15. <pre class="brush:pl;toolbar:false">perl</pre> 
16. <pre class="brush:php;toolbar:false">php</pre> 
17. <pre class="brush:plain;toolbar:false">plainText</pre> 
18. <pre class="brush:ps;toolbar:false">PowerShell</pre> 
19. <pre class="brush:python;toolbar:false">Python</pre> 
20. <pre class="brush:ruby;toolbar:false">Ruby</pre> 
21. <pre class="brush:scala;toolbar:false">Scala</pre> 
22. <pre class="brush:sql;toolbar:false">Sql</pre> 
23. <pre class="brush:vb;toolbar:false">Vb</pre> 
24. <pre class="brush:xml;toolbar:false">Xml</pre> 

第三步：使用

先点击编辑器左上角的源码，此时编辑器里所有东西都成为源码格式，找到需要插入代码的地方，比如要插入一段html代码，那就复制“<pre class="brush:html;toolbar:false">Html</pre>”到源码里，然后再次点击源码，此时恢复排版效果，粘贴的“<pre class="brush:html;toolbar:false">Html</pre>”只会显示一个html，用需要插入的html代码替换掉html，发布文章后前台页面里的代码就会有高亮效果，而且再次编辑也不会错乱。

这里其实就是反向思维，插入了html代码再次编辑时编辑器里显示的是html代码的浏览器解析效果或者说浏览器预览效果，如果不做更改保存之后前台页面显示的也是浏览器解析效果，而我们需要的是代码，要想代码不被解析，那就让代码变成文本，也就是上面的操作过程。

这个方法虽然是半手动，但是对帝国cms的安全性没有任何影响，因为只用了一个js文件和一个css文件，这两个文件完全可以设置为只读。