帝国cms内容页如何添加代码高亮
帝国cms的编辑器用的是ckeditor-5，但是没有代码高亮，更换百度编辑器也有点儿问题，就是在文章再次编辑的时候，html代码会出错，那怎么给代码添加高亮呢，只要在帝国cms现有的编辑器上，引用文件就可以了
1、下载SyntaxHighlighter.zip文件，解压到根目录
2、修改内容模板，增加以下调用
| 1 2 3 4 5 | < 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 > |
3、编辑器里面在添加的代码片段，增加标签<pre></pre>,修改样式就行.所有的代码语言我都整理了一个列表，如下：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | < 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 > |
