您现在的位置是:首页 > cms教程 > dedecms教程dedecms教程
实现dedecms5.7代码高亮的方法
孟航沛2023-12-25dedecms教程已有24人查阅
导读很多做网站的朋友在应用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文件,加载起来可能会比较慢,另外可拓展性不强,我也会不定期优化该插件,也希望各位网友能提出意见。
本文标签:
很赞哦! (1)
暂无内容 |
暂无内容 |
相关源码
-
自适应营销型IT网络工作室互联网建站公司pbootcms网站模板为IT网络服务商、建站企业打造的高性能营销门户,基于PbootCMS开源内核深度开发采用HTML5自适应架构,实现PC与手机端数据实时同步交互。查看源码
-
pbootcms网站网络公司个人作品展示类网站源码(自适应)为网站建设公司、网络服务企业打造的响应式门户解决方案,基于PbootCMS内核深度开发。采用前沿自适应架构,无缝适配手机端交互与PC端展示需求。查看源码
-
(pc+wap)pbootcms网站模板蓝色小程序网站开发公司基于PbootCMS内核开发的营销型门户模板,为小程序开发公司、电商软件企业打造。采用HTML5自适应架构,实现PC与手机端数据实时同步展示查看源码
-
(PC+WAP)铝合金门窗定制pbootcms网站模板源码为铝合金门窗、定制门窗企业打造的高性能网站模板,基于PbootCMS开源内核开发,采用HTML5自适应架构,PC与手机端数据实时同步,覆盖全终端用户交互场景。查看源码
-
自适应APP应用程序介绍推广落地页pbootcms网站源码下载移动应用开发商设计的营销型落地页模板,基于PbootCMS内核深度开发采用前沿响应式架构,无缝适配手机端操作习惯与PC端展示需求。查看源码
-
pbootcms网站模板响应式全屏旅游景区网站源码本模板为风景民宿、旅游景区等企业设计,基于PbootCMS内核开发,具备响应式布局与专业SEO优化功能,助力企业低成本高效获客。以下是核心特点:查看源码
相关教程
暂无内容 |
暂无内容 |
图文教程
dedecms评论中怎么调用会员头像
dede_feedback中有个face字段。但真正的头像face字段应该是在dede_member表中。尝试在feedback模板里调用dede_member的face字段失败。dede织梦arclist标记加入关键字属性模板解析出错的解决方法
rclist 标记中使用要害字属性时,模板解析出错。打开 include/inc/inc_fun_SpGetArcList.phpdedecms模板标记语法和属性说明一
【Arclist 标记】这个标记是DedeCMS最常用的一个标记,也叫自由列表标记,其中 hotart、coolart、likeart、artlist、idedecms5.7列表页重复标题加上分页码的方法
DEDE 5.7列表页优化,主要针对织梦列表页标题重复进行优化,优化涉及模版文件以及织梦功能文件修改。如果你使用织梦建站,又恰巧使用了谷歌站长工具,
分享笔记 (共有 0 篇笔记) |