您现在的位置是:首页 > 教程 > 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文件,加载起来可能会比较慢,另外可拓展性不强,我也会不定期优化该插件,也希望各位网友能提出意见。
本文标签:
很赞哦! ()
相关文章
随机图文
-
为织梦cms文章图集的每一张图片添加alt标签的方法
对seo有一点链接的人知道 搜索引擎的蜘蛛是无法识别图片的,它主要是根据alt标签来识别这张图片是什么意思,我们可以看到当我们在百度图片或者是谷歌图片中 -
织梦dedecmsV5.7终极性能优化策略方法
能同时满足所有用户的需求的,在以往,不少人对DedeCms性能问题表示怀疑,因此本人在此发布一篇关于如何对性能进行优化的文章,并提供最终优化效果测试结果。 -
dedecms地区联动搜索彻底解决办法
本例以文章模型为列子 0 添加 联动类型地区。织梦dedecms地区联动搜索 彻底解决办法 :本例以文章模型为列子 -
织梦5.7修改文章时间不变的解决方法
织梦CMS 5.7有一个非常智能的“问题”,使用过Dedecms5.7的朋友,应该发现了一个这样的问题,就是在以前发布过的文章,如何我现在修改文章后
留言与评论 (共有 条评论) |