如何在DedeCms 5.7中实现代码高亮显示

如何突出显示dedecms 5.7代码？

无论如何构建博客网站或CMS网站，其中许多网站都需要代码突出显示。Dreaming CMS是中国优秀的CMS建站系统之一，不像Wordpress有很多插件。我用的是最新的dedeCMS 5.7，在网上搜了很久的资料。他们中的大多数人写了关于CKEditor和SyntaxHighlighter集成的文章，但DEECMS集成了CKEDIT，并且通常只关注ckeditor的config.js

推荐学习:梦想编织cms

所以我只能自己琢磨修改。现在我将方法写出来供站长朋友们参考:

首先，去SyntaxHighlighter的官方网站下载。网站地址是http://alexgorbatchev.com/SyntaxHighlighter/download/.，建议下载2.1版本。3.0版本好像不支持自动换行，这里用的是2.1.382版本。将下载的文件解压到syntaxHighlight文件夹中，并删除里面无用的文件，只保留脚本和样式文件夹。

其次，创建一个新的dialogs文件夹，并在其中创建一个名为Syntaxihighlight.js的新文件。由于代码量很大，所以不适合发布。请直接下载Syntaxihighlight.js。

如果您想修改代码区的样式，请在以下代码处进行修改。

标签中的样式。代码如下:

onOk:function（）{ var I = this . get parent editor（）；var h = I。get selection（）；var g = h . getstartelement（）；var l = g &amp。& ampg . getascendant（& quot；pre & quot，真）；var j = f（）；this . commit content（j）；var k = e（j）；var m = CKEDITOR.dom.element。createfrohtml（& amp；#39;& lt表格样式= & quot边框:1px solid # EAED9C宽度:660px"& gt& lttr & gt& lttd & gt& ltpre class = & quot& amp#39;+k+& amp；#39;"& gt& amp#39;+c（j . code）+& quot；");if（l）{ m . insert before（l）；l . remove（）} else { I。insert element（m）} }，3。然后创建一个新的图像文件夹来存储图片文件syntaxhighlight.gif，该文件显示在编辑器工具栏上，可以使用16*16像素的图片。

第四，创建一个新的lang文件夹，这是一个语言包。其中有两个文件，一个是中文cn.js，另一个是英文en.js .代码内容如下:

En.js代码如下:

代码如下:

CK editor . plugins . set lang（& amp；#39;syntaxhighlight & amp#39;，& amp#39;en & amp#39;，{ syntaxhighlight: { title:#39;添加或更新代码片段& amp#39;，source tab:& amp；#39;源代码& amp#39;，lang LBL:& amp；#39;选择语言。#39;，高级标签:& amp#39;高级& amp#39;，隐藏阴沟:& amp#39;隐藏水槽和。#39;，hidegutterbl:& amp；#39;隐藏水槽和。行号。& amp#39;，隐藏控件:& amp#39;隐藏控件。#39;，hideControlsLbl:& amp；#39;在代码块顶部隐藏代码控件。& amp#39;，崩溃:& amp#39;崩溃&amp。#39;，collapse LBL:& amp；#39;默认情况下折叠代码块。（需要打开控件）& amp#39;，显示列:& amp#39;显示列& amp#39;，showColumnsLbl:& amp；#39;在第一行显示行列。& amp#39;换行:& amp#39;禁用换行。#39;，line wrap LBL:& amp；#39;关闭换行。& amp#39;，行数:& amp#39;默认行数&amp。#39;，高亮显示:& amp#39;高光线条&amp。#39;，highlight LBL:& amp；#39;输入要突出显示的逗号分隔的行，例如& ltem & gt3,10,15 & lt/em & gt；。& amp#39;} });cn.js的代码如下:

代码如下:

CK editor . plugins . set lang（& amp；#39;syntaxhighlight & amp#39;，& amp#39;cn & amp#39;，{ syntaxhighlight: { title:#39;添加或更新代码&；#39;，source tab:& amp；#39;code &；#39;，lang LBL:& amp；#39;选择一种语言&；#39;，高级标签:& amp#39;高级&；#39;，隐藏沟:& amp#39;隐藏分界线&；#39;，hideGutterLbl:& amp；#39;隐藏分割线和行号&；#39;，隐藏控件:& amp#39;隐藏工具栏&；#39;，hideControlsLbl:& amp；#39;隐藏浮动工具栏&；#39;，崩溃:& amp#39;代码折叠&；#39;，collapse LBL:& amp；#39;默认情况下折叠代码块（需要启用工具栏）&；#39;换行:& amp#39;自动换行&；#39;，line wrap LBL:& amp；#39;关闭自动换行&；#39;，自动链接:#39;自动链接&；#39;，autoLinksLbl:& amp；#39;不自动转换超链接&；#39;，行数:& amp#39;起始行号&；#39;，高亮显示:& amp#39;突出显示行号&；#39;，highlight LBL:& amp；#39;输入逗号分隔的行号，例如

代码如下:

CK editor . plugins . add（& quot；语法高亮显示& quot，{要求:

将syntaxhighlight文件夹上传到/include/ckeditor/plugins/文件夹，打开背景，添加一篇文章并尝试查看编辑器最后一行是否有如图所示的按钮:

点击按钮弹出如下图所示的对话框输入代码，可以切换到高级选项对代码进行一些高亮显示的配置:

八、但这些还不够，还要在文章模板文件/templates/default/article _ article.htm文件中引入高亮显示的画笔JS文件和CSS文件，因为有必要引入大量的JS，所以建议把导入的代码放进去。

标签，等待加载并显示上一页。

代码如下:

& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shcore . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush Java . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrushjscript . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush PHP . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush Scala . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush SQL . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/cke editor/plugins/syntax highlight/scripts/shbrush VB . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush XML . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush bash . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrushcpp . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/cke editor/plugins/syntax highlight/scripts/shbrushcsharp . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/cke editor/plugins/syntax highlight/scripts/shbrushcss . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/cke editor/plugins/syntax highlight/scripts/shbrush Delphi . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush diff . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/cke editor/plugins/syntax highlight/scripts/shbrushgroovy . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush plain . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/CK editor/plugins/syntax highlight/scripts/shbrush python . js & quot；& gt& lt/script & gt；& lt脚本类型= & quot文本/JavaScript & quot；src = & quot/include/cke editor/plugins/syntax highlight/scripts/shbrush ruby . js & quot；& gt& lt/script & gt；& lt链接类型= & quottext/CSS & quot；rel = & quot样式表& quothref = & quot/include/CK editor/plugins/syntax highlight/styles/sh core . CSS & quot；/& gt；& lt链接类型= & quottext/CSS & quot；rel = & quot样式表& quothref = & quot/include/CK editor/plugins/syntax highlight/styles/shthemedefault . CSS & quot；/& gt；& lt脚本类型= & quot文本/JavaScript & quot；& gtsyntax highlight er . config . clipboard swf = & amp；#39;/include/cke editor/plugins/syntax highlight/scripts/clipboard . swf & amp；#39;；syntax highlight er . all（）；& lt/script & gt；

最终发布和生成的文章页面效果图如下:

当然，集成也有一些缺点，即html页面中可能会引入大量JS文件，加载速度可能会很慢，并且可扩展性不强。我也会不定期优化插件，希望各位网友多多指教。

这几篇文章你可能也喜欢：

• 帝国忘记cms密码怎么办？
• 帝国cms会员中心进入方法（帝国cms会员中心进入方法）
• 如何控制dedecms列表页面的缩略图大小(dedecms分页标签)
• dedecms如何去除梦织底层的梦织版权信息
• dedecms5.7 ask模块404现在该怎么办？

本文由主机参考刊发，转载请注明：如何在DedeCms 5.7中实现代码高亮显示 https://zhujicankao.com/109941.html