您现在的位置是:首页 > 教程 > dedecms教程dedecms教程
实现dedecms5.7代码高亮的方法
孟航沛2023-12-25 23:57:42dedecms教程已有人查阅
导读很多做网站的朋友在应用CMS都需要代码高亮,而我们的织梦CMS却不像Wordpress一样又大把大把的插件可用,如何实现织梦模板 5.7代码高亮呢?在网上搜了很长时间资料
很多做网站的朋友在应用CMS都需要代码高亮,而我们的织梦CMS却不像Wordpress一样又大把大把的插件可用,如何实现织梦模板 5.7代码高亮呢?在网上搜了很长时间资料,大都写的是CKEditor和SyntaxHighlighter整合的文章,但是织梦模板将ckeditor做了集成,和一般的只针对于ckeditor对config.js修改不同。所以只能自己琢磨修改了,现将方法写出供站长朋友们参考:
一、首先去SyntaxHighlighter官方网站下载,网址: /static/upload/image/20231003/n4lm2awus2u图片文件,该图片文件在编辑器工具栏上显示,可以使用16*16像素的图片
四、新建lang文件夹,是语言包,里面有两个文件,一个是中文cn.js一个是英文en.js;
五、新建plugin.js文件,该文件是ckeditor插件必须得文件,里面是对该插件的一些配置,代码如下:
六、由于织梦模板 5.7自己集成了一个dedepage插件,用来添加ckeditor自定义插件,在/include/ckeditor/dedepage文件夹下,打开plugin.js文件在之后面添加:
requires:['yntaxhighlight']中syntaxhighlight为代码高亮插件的文件夹名,添加完之后的代码如下:
七,修改/include/ckeditor/ckeditor.inc.php文件,在$toolbar['sic']的之后一行添加元素Code,修改后代码如下:
至此,编辑器的修改已经完成,修改后的syntaxhighlight文件夹文件目录结构图如下图:
将syntaxhighlight文件夹上传到/include/ckeditor/plugins/文件夹下,打开后台,添加文章试一下,看看编辑器的上之后一行是否出现了如图所示的按钮:
点击按钮弹出如下图所示的对话框输入代码,并且可以切换到高级选项对代码高亮显示做一些配置:
八,但是光这些还不够,还要在文章模板文件/templets/default/article_article.htm文件里引入高亮显示的笔刷JS文件和CSS文件,由于是需要引入很多JS,所以建议将引入的代码放在</body>标签之前,等待前面的网页加载完后加载,进行显示。
引入代码如下:
之后发表并生成的文章页面;
当然,该整合也有点缺点,就是在html页面页面中可能会引入大量的JS文件,加载起来可能会比较慢,另外可拓展性不强,我也会不定期优化该插件,也希望各位网友能提出意见。
一、首先去SyntaxHighlighter官方网站下载,网址: /static/upload/image/20231003/n4lm2awus2u图片文件,该图片文件在编辑器工具栏上显示,可以使用16*16像素的图片
四、新建lang文件夹,是语言包,里面有两个文件,一个是中文cn.js一个是英文en.js;
五、新建plugin.js文件,该文件是ckeditor插件必须得文件,里面是对该插件的一些配置,代码如下:
六、由于织梦模板 5.7自己集成了一个dedepage插件,用来添加ckeditor自定义插件,在/include/ckeditor/dedepage文件夹下,打开plugin.js文件在之后面添加:
requires:['yntaxhighlight']中syntaxhighlight为代码高亮插件的文件夹名,添加完之后的代码如下:
七,修改/include/ckeditor/ckeditor.inc.php文件,在$toolbar['sic']的之后一行添加元素Code,修改后代码如下:
至此,编辑器的修改已经完成,修改后的syntaxhighlight文件夹文件目录结构图如下图:
将syntaxhighlight文件夹上传到/include/ckeditor/plugins/文件夹下,打开后台,添加文章试一下,看看编辑器的上之后一行是否出现了如图所示的按钮:
点击按钮弹出如下图所示的对话框输入代码,并且可以切换到高级选项对代码高亮显示做一些配置:
八,但是光这些还不够,还要在文章模板文件/templets/default/article_article.htm文件里引入高亮显示的笔刷JS文件和CSS文件,由于是需要引入很多JS,所以建议将引入的代码放在</body>标签之前,等待前面的网页加载完后加载,进行显示。
引入代码如下:
之后发表并生成的文章页面;
当然,该整合也有点缺点,就是在html页面页面中可能会引入大量的JS文件,加载起来可能会比较慢,另外可拓展性不强,我也会不定期优化该插件,也希望各位网友能提出意见。
本文标签:
很赞哦! ()
相关文章
随机图文
-
dedecms新手问题汇总和解决方法
织梦模板是非常好用并且普及率也是非常高的PHP开源建站程序,由于官方论坛比较冷清,很多朋友提出的问题都是非常基础的,这样就导致了高手不想回答 -
dedecms5.7实现迅雷下载链接的方法
在dedecms里有个下载地址链接,理论上就是给个软件下载链接就可以,但是太单调了,所以为了方便用户的下载,今天给大家分享dedecms5.7实现迅雷下载链接。 -
织梦dedecms5.7自由列表使用教程
在DedeCMS V5.3版本中加入了自由列表的功能,使用过织梦程序的用户知道,一般网站数据可以通过{dede:arclist/}标签进行调用或者在栏目页通过{dede:list/}标签进行栏目数据的调用 -
dedecms织梦产品图集实现图片缩略图切换大图的方法
dedecms列表中调用单个图集中图片的数量做一个企业站的时候,产品中心没有用默认的产品来做;而是用图集来完成的,感觉图集用起来比产品更加方便一些。
留言与评论 (共有 条评论) |