# 帝国cms如何实现内容页添加代码高亮效果

*Published:* 2023-11-18
*Author:* 客服001

#### 温馨提醒

如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢

本文最后更新于2023年11月18日，已超过 180天没有更新



帝国cms默认编辑器ckeditor-5，在格式下拉选项有一个"已编排格式"，当我们插入一段代码后，选择"已编排格式"，添加的代码行就会自动添加一个pre标签。

第一步，下载[SyntaxHighlighter](https://www.xarjtc.com/wp-content/uploads/2023/11/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;i<paras.length;i++ ) {
    paras[i].setAttribute("class","brush:php;toolbar:false");   
}
</script>
```

[![](https://www.xarjtc.com/wp-content/uploads/2023/11/7075fd58c399c8d26f9dfe3cd0eed532.png)](https://www.xarjtc.com/wp-content/uploads/2023/11/7075fd58c399c8d26f9dfe3cd0eed532.png)

提示：在不改变帝国cms任何文件的情况下，使用SyntaxHighlighter实现代码[高亮](https://www.xarjtc.com/tag/%e9%ab%98%e4%ba%ae "查看高亮此标签更多文章")，这里我用了一段js在pre自动写入样式，默认代码段是php格式，如果你的网站html，或者css偏多，可以把brush:php这句改成brush:html，或者brush:css。