帝国cms内容页添加代码高亮效果的方法（帝国cms自定义页面）

帝国cms默认编辑器ckeditor-5，在格式下拉选项有一个"已编排格式"，当我们插入一段代码后，选择"已编排格式"，添加的代码行就会自动添加一个pre标签，下面是小编整理的关于如何在帝国cms中设置代码高亮的解决方案和思路，方便新手站长们在利用帝国cms建网站的时候，可以少走一些弯路。

第一步，下载SyntaxHighlighter.zip文件，解压到根目录

第二步，修改内容模板，增加以下调用

link href="[!--news.url--]SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" type="text/css" />
    
script type="text/javascript" src="[!--news.url--]SyntaxHighlighter/shCore.js">
    /script>
    
script type="text/javascript">
    
 SyntaxHighlighter.all();
    
/script>
    
script>
    
var paras = document.getElementsByTagName("pre");
    
for ( var i=0;
    iparas.length;
i++ ) {
    
    paras[i].setAttribute("class","brush:php;
    toolbar:false");
   
}
    
/script>
    

提示：在不改变帝国cms任何文件的情况下，使用SyntaxHighlighter实现代码高亮，这里我用了一段js在pre自动写入样式，默认代码段是php格式，如果你的网站html，或者css偏多，可以把brush:php这句改成brush:html，或者brush:css。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！