帝国cms 网页添加代码高亮效果

Jaysun

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

第一步,下载SyntaxHighlighter文件,解压到根目录 

隐藏内容
评论可见
前往评论



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

<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>

在编辑文档时,当代码全选,调整为“已编排格式"”。

1.png

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

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,359人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码