一个80后网站前端设计和平面设计师的小站
您现在的位置:首页 > 建站基础 > 程序代码 > 帝国cms系统后台发布文章代码/语法高亮显示方法

帝国cms系统后台发布文章代码/语法高亮显示方法

编辑:文轩小站发布于:2020-02-10 22:53:35程序代码人浏览

摘要:SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色,使用十分方便,效果也不错,而且几乎支持常见的所有语言。同样在帝国CMS后台的编辑上也能使用,不过得先设置好,同时还要在编辑时加上代码就可以实现代码/语法高亮显示。

SyntaxHighlighter插件在帝国CMS上使用的详细步骤和方法如下,供有需要的朋友参考使用。
SyntaxHighlighter插件使用步骤共四步:
一、下载插件并解压缩SyntaxHighlighter(可到官方网站下载)当前版本3.0.83,然后放在网站的目录下。
二、引入文件:(我们一般发布的文章是属于内容页,所以我们要在帝国CMS内容页模板上加上引用文件-JS和CSS文件)
将解压后的scripts和styles文件夹复制到项目中,在页面中引入shCore.js和核心CSS文件shCore.css。
其次引入你要高亮的语言JS,比如想高亮显示Java,那么必须引入scripts文件夹中的shBrushJava.js。
最后引入高亮显示的主题CSS,默认为shThemeDefault.css。
其加入方式如下:在内容页模板的最上面加上这段代码就是在head标签引入JS和CSS文件。(注意:链接的路径务必要保证正确)




三、在编辑器中先切换到源码编辑方式,加入需要用的样式标签,包含了有很多种样式,比如有(HTML\CSS\JS\c++\PHP等等语言的样式),要看你要加的代码片段是什么语言就用什么语言的样式。为了方便大家使用,这里也做了总结,并全部列出来,可以自己收藏,用的时候直接复制放上去就可以用。

Xml
Html
Css
Java
JavaFx
javascript
php
C/C++
CodeFunction
C#
Delphi
Diff
Erlang
Groovy
perl
plainText
PowerShell
Python
Ruby
Scala
Sql
Vb
ActionScript3
Bash/Shell

        做好上面这三步基本就可以实现发布含有代码片段的文章里含有代码高亮语言显示了,不过本人亲自测试了在PC上的是没什么问题,不过在移动端上有点小问题,就是代码不自动换行,而是直接被隐藏掉了,所以在这里一起把解决的方式告诉大家。第四步,解决这个移动端代码换行的问题。

       第四步:解决方法:修改shCoreDefault.css文件,找到对.syntaxhighlighter textarea的代码高亮样式定义区域,在这个样式里加上一句:word-break:break-all !important;让代码到最右边了就强制换行显示。

      做好以上的这四步,我们就可以正常的在帝国CMS后台编辑中及发布的文章内容里实现代码片段的高亮语言显示了,是不是很实用很方便呢?如果觉得有所帮助,记得点个赞哦!

标签: 代码/语法高亮显示  帝国CMS代码样式显示  

打赏赞助本站

  • 如果你觉得本站很棒,对您有所帮助,可以通过扫码打赏赞助本站哦!我也会努力做好本站哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~