首页 > 文章资讯 > 技术教程 > 帝国cms教程 > 帝国cms7.5文章内容中嵌入代码突出显示和着色代码高亮方法的教程

帝国cms7.5文章内容中嵌入代码突出显示和着色代码高亮方法的教程

时间：2023年08月06日

来源：网络

编辑：佚名

【帝国cms问题】问题五、帝国cms 7.5文章内容中嵌入代码突出显示和着色代码高亮方法的教程(作者亲测)(帝国cms教程)
温馨提示：
你可以去网站下载你想用的js和css文件，https://highlightjs.org/download/
进入网站后，选择想要使用的语言。然后点击底部的下载进行下载。
也可以直接下载下面我提供的代码。
方法一、
第一步: 帝国cms代码高亮SyntaxHighlighter.rar；
帝国cms代码高亮SyntaxHighlighter.rar
下载链接：
链接: https://pan.baidu.com/s/1I1KXBP2rI4d-1hb5i1kZWA 提取码: 3v3g
第二步:修改“模板”-“内容模板”，添加以下调用，在<head>与</head>之间加入css 与JS 的引用。
<link href="[!--news.url--]static/css/shCoreDefault.css" rel="stylesheet">
<script src="[!--news.url--]static/js/shCore.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
第三步: 在编辑器区域。
1、输入代码
2、选择代码
3、格式选择---已编排格式
示意图：
【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)

【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)
4、点击“源码”，在<pre >这段代码</pre>里面加上属性（class="brush:php;toolbar:false"）红色字部分。
<pre class="brush:php;toolbar:false" >这段代码片段内容</pre>
效果展示如下：
//【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)（两种方法）
<script type="text/javascript"> SyntaxHighlighter.all(); </script>
提示：如果操作不方便的话，可以手动添加一个提示；
第一步：将下方代码复制；（以下以PHP 代码为例！）
<tr><td> class="brush:php;toolbar:false"</td></tr>
其他代码参考：
<pre class="brush:as3;toolbar:false">ActionScript3</pre>
<pre class="brush:bash;toolbar:false">Bash/Shell</pre>
<pre class="brush:css;toolbar:false;">Css</pre>
<pre class="brush:cpp;toolbar:false;">C/C++</pre>
<pre class="brush:cf;toolbar:false">CodeFunction</pre>
<pre class="brush:c#;toolbar:false">C#</pre>
<pre class="brush:delphi;toolbar:false">Delphi</pre>
<pre class="brush:diff;toolbar:false">Diff</pre>
<pre class="brush:erlang;toolbar:false">Erlang</pre>
<pre class="brush:groovy;toolbar:false;">Groovy</pre>
<pre class="brush:html;toolbar:false">Html</pre>
<pre class="brush:java;toolbar:false">Java</pre>
<pre class="brush:jfx;toolbar:false">JavaFx</pre>
<pre class="brush:js;toolbar:false">javascript</pre>
<pre class="brush:pl;toolbar:false">perl</pre>
<pre class="brush:php;toolbar:false">php</pre>
<pre class="brush:plain;toolbar:false">plainText</pre>
<pre class="brush:ps;toolbar:false">PowerShell</pre>
<pre class="brush:python;toolbar:false">Python</pre>
<pre class="brush:ruby;toolbar:false">Ruby</pre>
<pre class="brush:scala;toolbar:false">Scala</pre>
<pre class="brush:sql;toolbar:false">Sql</pre>
<pre class="brush:vb;toolbar:false">Vb</pre>
<pre class="brush:xml;toolbar:false">Xml</pre>
第二步：将代码粘贴至（系统--数据表与系统模型--新闻系统数据表【也可以是其他系统模型】--管理系统模型--修改--录入表单模板【新闻正文的上方】--提交保存）
示意图：
【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)

【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)
效果展示：
【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)

【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)
总结：以后发布文章时，可以给我们的代码加上颜色，方便查看啦！
PS：到这里【帝国cms问题】问题五、帝国cms文章内容中嵌入代码突出显示和着色方法的教程(图文教程)(作者亲测)，问题解决方法到这里就结束啦。只需要新发布新文章是按照操作步骤实施即可见证奇迹的时刻。

新闻资讯更多

猜你需要

帝国cms7.5文章内容中嵌入代码 突出显示和着色代码高亮方法的教程

帝国cms7.5文章内容中嵌入代码突出显示和着色代码高亮方法的教程