帝国cms7.5代码片段高亮显示的正确解决办法
时间:2023年05月24日
/来源:网络
/编辑:佚名
做技术博客的朋友们都应该遇到过类似的问题,就是帝国cms编辑器不带代码片段功能,前台显示的代码不好看,影响博客前端体验,网上虽然有很多添加此功能的插件,但是很多不能用,bug比较多,我专门针对这个问题整合了一套完整的帝国cms7.5代码片段高亮显示的正确解决办法,分享给大家
第一步:先下载好这些文件,下载地址如下:
https://ckeditor.com/cke4/addon/codesnippet
https://ckeditor.com/cke4/addon/widget
https://ckeditor.com/cke4/addon/lineutils
https://ckeditor.com/cke4/addon/widgetselection
下载下来后解压到当前文件夹,然后把四个文件夹上传到/e/admin/ecmseditor/infoeditor/plugins下即可
第二步:修改config.php配置文件(文件所在目录/e/您的后台目录/ecmseditor/infoeditor/config.php)代码中添加CodeSnippet 效果如下:查找config.extraPlugins,在后面增加codesnippet; 如下:
//效果如下
//大概在95行 里面添加CodeSnippet 注意大小写
{ name: 'insert', items: [ 'Image', 'etranmore', 'Flash', 'etranmedia', 'etranfile', '-', 'Table', 'HorizontalRule', 'SpecialChar', 'equotetext', 'einserttime', 'einsertpage', 'einsertbr' ,'CodeSnippet'] },
//大概在120行 里面添加CodeSnippet 注意大小写
config.extraPlugins = 'etranfile,etranmedia,etranmore,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext,codesnippet';
//在文件最后添加这个
config.codeSnippet_theme = 'monokai_sublime';
第三步:新建js文件demo.js 自己可以随便命名,文件内容如下:
$(function () {
$("code").each(function () {
$(this).html("<ul id=\'codeblock'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
});
});
第四步:修改样式表,不修改的话默认没有行号,这里我用的是”monokai_sublime.css“举例,自己根据实际使用的样式表进行修改;
/*修改原始样式(开始)*/
.hljs {
display: block;
padding: 0.5em;
background: #090909;
border: solid 1px #333;
border-radius: 3px;
white-space: pre-wrap;
word-break: break-all;
}
/*修改原始样式(结束)*/
/*新添加样式,控制行号(开始)*/
.hljs ul {
margin-left: 0px;
margin-top:15px;
}
.hljs ul li {
border-left: solid 1px #333;
padding: 3px;
list-style: decimal-leading-zero;/*0开头的数字标记。(01, 02, 03, 等。)*/
}
.hljs ul li:nth-child(even) {/*偶数行的背景颜色*/
background-color: #010101;
}
/*新添加样式,控制行号(结束)*/
第五步,引用js和css样式表,
找到这个文件/e/您的后台目录/AddNews.php打开引用一下文件:
在/e/您的后台目录/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight目录下,
引用highlight.pack.js
在/e/您的后台目录/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles目录下,
引用刚修改好的样式文件:monokai_sublime.css
把新建的demo文件保存到/e/您的后台目录/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight目录下并引用
效果如下:
<script src="ecmseditor/infoeditor/plugins/codesnippet/demo.js"></script>
<link rel="stylesheet" href="ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/monokai_sublime.css" type="text/css">
<script src="ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
//这个文件必须要加上
<script>hljs.initHighlightingOnLoad();</script>
第六步:把以上引用的文件复制一份,上传至前台/skin/目录下,并引用到需要显示代码的内容页面模板中,这个不用我多说了吧,一般情况只要按照这个步骤操作都可以做好,如果你的还没做好,遇到困难请联系博主。
第一步:先下载好这些文件,下载地址如下:
https://ckeditor.com/cke4/addon/codesnippet
https://ckeditor.com/cke4/addon/widget
https://ckeditor.com/cke4/addon/lineutils
https://ckeditor.com/cke4/addon/widgetselection
下载下来后解压到当前文件夹,然后把四个文件夹上传到/e/admin/ecmseditor/infoeditor/plugins下即可
第二步:修改config.php配置文件(文件所在目录/e/您的后台目录/ecmseditor/infoeditor/config.php)代码中添加CodeSnippet 效果如下:查找config.extraPlugins,在后面增加codesnippet; 如下:
//效果如下
//大概在95行 里面添加CodeSnippet 注意大小写
{ name: 'insert', items: [ 'Image', 'etranmore', 'Flash', 'etranmedia', 'etranfile', '-', 'Table', 'HorizontalRule', 'SpecialChar', 'equotetext', 'einserttime', 'einsertpage', 'einsertbr' ,'CodeSnippet'] },
//大概在120行 里面添加CodeSnippet 注意大小写
config.extraPlugins = 'etranfile,etranmedia,etranmore,autoformat,ecleanalltext,einsertbr,einsertpage,einserttime,equotetext,codesnippet';
//在文件最后添加这个
config.codeSnippet_theme = 'monokai_sublime';
第三步:新建js文件demo.js 自己可以随便命名,文件内容如下:
$(function () {
$("code").each(function () {
$(this).html("<ul id=\'codeblock'><li>" + $(this).html().replace(/\n/g, "\n</li><li>") + "\n</li></ul>");
});
});
第四步:修改样式表,不修改的话默认没有行号,这里我用的是”monokai_sublime.css“举例,自己根据实际使用的样式表进行修改;
/*修改原始样式(开始)*/
.hljs {
display: block;
padding: 0.5em;
background: #090909;
border: solid 1px #333;
border-radius: 3px;
white-space: pre-wrap;
word-break: break-all;
}
/*修改原始样式(结束)*/
/*新添加样式,控制行号(开始)*/
.hljs ul {
margin-left: 0px;
margin-top:15px;
}
.hljs ul li {
border-left: solid 1px #333;
padding: 3px;
list-style: decimal-leading-zero;/*0开头的数字标记。(01, 02, 03, 等。)*/
}
.hljs ul li:nth-child(even) {/*偶数行的背景颜色*/
background-color: #010101;
}
/*新添加样式,控制行号(结束)*/
第五步,引用js和css样式表,
找到这个文件/e/您的后台目录/AddNews.php打开引用一下文件:
在/e/您的后台目录/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight目录下,
引用highlight.pack.js
在/e/您的后台目录/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/styles目录下,
引用刚修改好的样式文件:monokai_sublime.css
把新建的demo文件保存到/e/您的后台目录/ecmseditor/infoeditor/plugins/codesnippet/lib/highlight目录下并引用
效果如下:
<script src="ecmseditor/infoeditor/plugins/codesnippet/demo.js"></script>
<link rel="stylesheet" href="ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/monokai_sublime.css" type="text/css">
<script src="ecmseditor/infoeditor/plugins/codesnippet/lib/highlight/highlight.pack.js"></script>
//这个文件必须要加上
<script>hljs.initHighlightingOnLoad();</script>
第六步:把以上引用的文件复制一份,上传至前台/skin/目录下,并引用到需要显示代码的内容页面模板中,这个不用我多说了吧,一般情况只要按照这个步骤操作都可以做好,如果你的还没做好,遇到困难请联系博主。
新闻资讯 更多
- 【帝国cms教程】帝国CMS模板变量$GLOBALS[navclassid]用法分析04-03
- 【帝国cms教程】鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总04-03
- 【帝国cms教程】怎么快速找出帝国CMS数据库配置文件路径及迁移网站后修改技巧!04-03
- 【帝国cms教程】帝国CMS模板$GLOBALS[navclassid]用法详解04-03
- 【帝国cms教程】帝国cms 7.5版列表页分页样式修改笔记04-02
- 【帝国cms教程】解决帝国CMS搜索页面模板不支持灵动标签和万能标签的方法04-02
- 【帝国cms教程】帝国CMS只备份栏目和模板的方法04-02
- 【帝国cms教程】帝国CMS怎样删除清空数据库记录?04-02
热门文章
- 178Moban源码谈谈免费源码与收费源码的区别
- 2帝国CMS忘记后台登陆用户名、密码、认证码的解决方法
- 3帝国CMS(EmpireCMS) v7.5后台任意代码执行漏洞及具体修复方法
- 4帝国CMS和WordPress 哪个好?哪个适合建站?
- 5如何解决Discuz的密码错误次数过多请15分钟后登陆的问题
- 6帝国cms灵动标签取得内容和栏目链接地址
- 7emlog pro 注册码“开心”教程(如果有一天,emlog官方版 或者 emlog免费版 跑路了,那用户怎么办?)
- 8织梦CMS在nginx下设置伪静态方法(附nginx伪静态规则)
- 9帝国cms后台登录出现”您还未登录”怎么解决?
- 10帝国cms7.5忘记登录密码 和忘记登录认证码以及多次登录 失败被锁定解决办法