帝国CMS如何让网页代码高亮

如果你需要在网站上分享计算机学科的相关知识，那么避免不了会提到代码的操作。如果分享代码，如果前端页面不做调整，代码只会像文字一样的显示，很难看。如果我们分享图片的话，不方便他人参考学习。那该如何解决呢？我这边提供了两种代码高亮的样式。

一、Prism官方提供

首先我们下载相关的css和js文件，在我们的内容页面引入这两个文件，如果不熟悉的朋友可以先在本地测试。我们在代码区填写我们需要分享的代码。

<pre><code class="language-css">
         //代码区
     </code>
</pre>

示例图片：

 
 
 
 

当然这种方式比较适合后端的朋友，因为分享html代码需要转义。如果不转义的话，默认会认为这只是html标签而不显示在页面上。如果需要分享html代码，你可在代码的前后加上<script>标签，就像下面这样。更多详细用法请参考prism官网。

<pre><code class="language-css"><script type="text/plain">
        //html代码区
    </script></code></pre>

二、SyntaxHighlighter方式

同样的先下载代码高亮的css和js文件，然后在内容模板进行引入（这是我在本地测试的内容）

 

然后我们在需要分享代码区域做如下调整，记得切换成源码模式

<pre class="brush:html;toolbar:false">代码区</pre>

效果图：

 

我们分享的是什么类型的代码，brush后面的也做相应的切换。这里总结了部分：

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

 这种方法对于分享前端和后端的代码都合适，不知道各位还有何种方式能让代码高亮？