当前位置:首页 > 技术文章 > 站长教程 > 建站教程

实测无误!帝国cms完美实现代码高亮功能

发布时间:2017-12-06 14:55:34 作者:superl 来源:TOP技术学院 点击量:

本篇文章还是2014年时候写的,感觉还用的上,就分享出来啦

超详细教程让你的帝国cms网站完美实现代码高亮功能

本文中,介绍了帝国CMS系统整合syntaxhighlight插件来实现代码高亮的详细方法,并且带上了完整无错的附件,

作者亲自测试了2个使用帝国CMS系统搭建的网站,均成功实现了代码高亮功能。

 

为什么要写这个教程?

 

因为笔者有几个技术站,特别是编程技术网站(http://www.topjishu.net),发布的很多文章中,均有代码内容,不适用代码高亮功能的话,会降低内容的可读性!

使用代码高亮,可以使网站更加高端大气上档次!

 

在写这个教程之前,我也网上查看了这方面的几篇资料,也是使用syntaxhighlight插件来实现的,但是!多多少少存在问题导致无法使用!

 

比如有个文章,把需要修改的文件路径都写错了。

 

本来是eadminecmseditor 路径,他写的是edataecmseditor 路径.(或许方法不同,但是我使用它的方法根本行不通,后台更新的时候编辑器就没有加载该代

码高亮插件!)

 

还有篇文章,貌似是帝国CMS论坛的,他提供的附件里面,没有clipboard.swf 这个文件,导致显示代码时,没有最实用的代码复制,代码文本查看等功能,很不

完美!

 

而本篇文章,就是要实现帝国cms完美实现代码高亮功能,是完美!

 

并且,考虑到部分站长的技术问题,我大大的简化了相关的操作,直接打包所有需要用到的附件,以及修改好的文件代码。(请叫我活雷锋!)

成功实现代码高亮的例子:http://www.topjishu.net/article/12.html

 

后台更新截图:

1.jpg

 

 

 

前台展示截图:

 

2.jpg

 

 

好了,切入正题,下面我说方法:

 

本文提供的附件,包括一个js文件以及两个文件夹:

 

第一步:

连接网站的FTP,来到网站很目录下的/e/admin/ecmseditor/infoeditor/ 目录下

 

注意,其中的admin是默认的后台目录,修改过后台的,请替换为实际的后台目录!

 

使用附件中的fckconfig.js 文件,上传覆盖原来的/e/admin/ecmseditor/infoeditor/fckconfig.js文件。

 

第二步:

 

上传附件中的syntaxhighlighter文件夹,到网站的根目录!

 

 

第三步:

上传附件中的syntaxhighlight2文件夹,到网站ftp/e/admin/ecmseditor/infoeditor/editor/plugins/目录下。

 

到了这一步,我们的插件就已经部署好了,下面,还有最后,最重要的一步!网上那几篇文章都没有介绍的!

 

现在只是实现了插件集成,最重要的却是前台实现展示。

 

为了前台能够显示代码高亮,我们还需要在需要展示代码的页面的html中,引入相关的js文件才可以。具体看第四步。

 

第四步:

登录帝国CMS后台,对模板进行管理。

这里,我的系统是文章内容页显示代码高亮,那么,我们就在文章内容页模板代码的底步(</body>之前)的地方,引入我们的JS文件。

 

代码如下:

<script type="text/javascript" src="/syntaxhighlighter/scripts/shCore.js"></script>

<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushXml.js"></script>

<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJScript.js"></script>

<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCpp.js"></script>

<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushCss.js"></script>

<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushJava.js"></script>

<script type="text/javascript" src="/syntaxhighlighter/scripts/shBrushPhp.js"></script>

<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shCore.css"/>

<link type="text/css" rel="stylesheet" href="/syntaxhighlighter/styles/shThemeDefault.css"/>

 

<script type="text/javascript">

        SyntaxHighlighter.config.clipboardSwf = '/syntaxhighlighter/scripts/clipboard.swf';

        SyntaxHighlighter.all();

</script>

 

大家可以发现,代码中的js文件路径,就是附件中的syntaxhighlighter文件夹下的JS文件,我们在第二步,就已经上传到了网站的根目录啦。

备注:syntaxhighlighter目录下,有20多个JS文件,每个文件,分别对应一种语言,上面我只是在文章内容页模板中引入了不多几种代码语言而已,需要更多,自己添加吧。

 

 

其实,syntaxhighlighter文件夹的路径,可以自己修改,比如你让在/e/目录下也是可以的,但前台页面引入的时候,就也需要修改成对应的啦。

 

 

到了这里,我们就已经全部操作完成,去后台发布一篇存在代码的文章,要使用编辑器中的代码高亮插件来插入代码哦!之后生成,浏览该文章,你会发现,高端大气的代码高亮功能,已经在你的网站上运用成功啦!

帝国cms完美实现代码高亮功能.zip
文件类型: .zip c4c23f8b5544eee5a359a3ecc33cfc22.zip (176.27 KB)

 

本文链接:http://www.topjishu.net/article/15.html,如有转载,请注明出处!


关键词:帝国cms,代码高亮


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表