北京快乐8

搜索

当前位置:首页 > 全栈分享 > 帝国cms > 正文

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

发布时间:2019-04-22 00:39:12作者:魏义齐阅读:()

本文为博主原创文章,未经博主允许不得转载。

在文章&ldquo北京快乐8;帝国cms编辑器更换为百度编辑器并成功实现前台代码高亮和自适应”中以更换百度编辑器的方式解决了代码高亮问题,但是文末残留了北京快乐8小问题就是有代码的文章再次编辑代码显示错乱,这个问题不管是从百度编辑器还是帝国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" 北京快乐8;type="text/css" />  
  2. <script 北京快乐8;type="text/javascript" 北京快乐8;src="[!--news.url--]SyntaxHighlighter/shCore.js&q北京快乐8uot;></script>  
  3. <script type="text/javascript&北京快乐8quot;>  
  4.  SyntaxHighlighter.all();  
  5. </scrip北京快乐8t> 

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

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

  1. <pre class="brush:as3;toolbar:false">ActionScript3</pre> 
  2. <pre c北京快乐8lass="brush:bash;toolbar:false">Bash/Shell</pre> 
  3. <pre class="brush:css;toolbar:false;">北京快乐8;Css</pre> 
  4. <pre class="brush:cpp;toolbar:false;">C/C++</pre> 
  5. <pre class="brush:cf;toolbar:false">CodeFunction</pre> 
  6. <pre 北京快乐8;class="brush:c#;t北京快乐8oolbar:false">C#</pre> 
  7. <北京快乐8;pre class="brush:delphi;toolbar:false">Delphi</pre> 北京快乐8;
  8. <pre class="brush:diff;toolbar:false">Diff&北京快乐8lt;/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&北京快乐8lt;/pre> 
  13. <北京快乐8;pre class="brush:jfx;toolbar:false">JavaFx&北京快乐8lt;/pre> 
  14. <pre class="brush:js;toolbar:false">javascript</pre> 北京快乐8;
  15. <pre class="brush:pl;toolbar:false">per北京快乐8l</pre>北京快乐8; 
  16. <pre class="brush:php;toolbar:false">php</pre> 
  17. <pre class=&q北京快乐8uot;brush:plain;toolbar:false">北京快乐8;plainText</pre> 
  18. <pre class="brush:ps;toolbar:false">PowerShell</pre> 
  19. <pre 北京快乐8;class="brush:python;toolbar:false">Python</pre> 
  20. <pre class="brush:ruby;toolbar:false">Ruby&北京快乐8lt;/pre> 
  21. <pre 北京快乐8;class="brush:scala;toolbar:false">Scala</pre> 
  22. <pre class=北京快乐8"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>”只会显示北京快乐8html,用需要插入的html代码替换掉html,发布文章后前台页面里的代码就会有高亮效果,而且再次编辑也不会错乱。

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

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

魏义齐全栈技术交流:魏义齐web前端技术交流

上一篇:帝国cms如何让文章id从1开始(完美解决) 下一篇:帝国cms解决代码高亮方法二

赞助本站

原创不易,您的赞助就是博主更新的动力!

赞助本站可在赞助光荣榜留下外链信息,支付宝扫此二维码可领红包