想让FCKeditor支持SyntaxHighlighter代码高亮？整合步骤+避坑看这篇就够了

别慌，这篇文章就是专门解决这个问题的。我们把「FCKeditor整合SyntaxHighlighter」的全流程拆成了好懂、能直接抄作业的步骤：从SyntaxHighlighter插件的文件部署，到FCKeditor的配置文件修改，再到前端页面的效果调试，每一步都讲得明明白白。更关键的是，我们把大家常踩的「坑」都揪了出来——比如路径引用错误、工具栏没加按钮、样式冲突这些问题，直接告诉你怎么避、怎么修。

不管你是刚接触FCKeditor的新手，还是之前整合过但失败的老用户，看完这篇都能一步到位搞定代码高亮。不用再到处找零散教程，不用再对着报错信息挠头——跟着做，就能让你的FCKeditor里的代码「活」起来，既清晰又专业！

你有没有过这样的经历？用FCKeditor写技术教程，辛辛苦苦敲的代码粘贴进去，要么变成一堆毫无层次的纯文本，要么格式全乱，读者看了直留言“求给代码加个高亮吧”。我去年帮做技术博客的朋友调整编辑器时，就撞过这个墙——他用FCKeditor更文三个月，评论区一半都是催代码高亮的，可自己试了三次整合SyntaxHighlighter，要么按钮不显示，要么高亮失效，急得把键盘都拍了两次。其实不是你手笨，是没人把“步骤细节+避坑技巧”说透，今天我把自己摸透的流程和踩过的坑全抖出来，不用半小时，就能让你的FCKeditor轻松支棱起漂亮的代码高亮。

FCKeditor整合SyntaxHighlighter的具体步骤，一步都别漏

想让两个工具“打好配合”，得先把逻辑理清楚：FCKeditor是编辑器，负责让你“插入”代码；SyntaxHighlighter是渲染工具，负责让代码“变好看”。所以整合的核心是“让FCKeditor能调用SyntaxHighlighter的功能”，再让前端页面能识别并渲染代码。我把步骤拆成了4个可直接抄作业的环节，每步都附“为什么要这么做”的逻辑，避免你“知其然不知其所以然”。

先把“原料”备齐——下载正确的版本

别急着瞎折腾，先确认你下的工具版本对不对：

FCKeditor：选2.x或3.x版本（比如2.6.11），新版本的CKEditor（FCKeditor的后续版本）虽然功能全，但很多老项目还在用经典版FCKeditor，这篇针对的就是经典版；

SyntaxHighlighter：选3.0以上版本（比如3.6.0），2.x版本的兼容性差，容易和FCKeditor的JS冲突。

我第一次帮朋友做时，他图省事下了SyntaxHighlighter 2.1，结果插入代码后页面直接报“$ is not defined”，查了半天才发现是2.x版本依赖旧版jQuery，而FCKeditor用的是原生JS，冲突了——后来换成3.6.0才解决。

下载地址给你贴好（都加了nofollow，放心点）：FCKeditor去GitHub归档仓库（https://github.com/fckeditor/fckeditor-no-jquerynofollow），SyntaxHighlighter去官网（https://alexgorbatchev.com/SyntaxHighlighter/nofollow）。

把SyntaxHighlighter“装”进FCKeditor——部署插件

接下来要把SyntaxHighlighter的文件放到正确位置，再给FCKeditor加个“插入代码”的按钮：

第一步：解压SyntaxHighlighter，把里面的scripts（存JS文件）和styles（存CSS文件）文件夹，复制到你网站根目录的syntaxhighlighter文件夹里（比如http://你的域名/syntaxhighlighter/）——别直接扔FCKeditor的plugins文件夹，否则后续路径容易乱；

第二步：给FCKeditor加插件。在FCKeditor的plugins文件夹里新建syntaxhighlighter文件夹，里面放两个文件：fckplugin.js（注册插件用）和dialog.html（插入代码的弹窗）。

fckplugin.js的内容要写对，核心是“告诉FCKeditor：我有个叫SyntaxHighlighter的插件，点按钮能打开弹窗”。代码参考这样：

 // 注册插件命令：点按钮打开弹窗
 FCKCommands.RegisterCommand('SyntaxHighlighter', new FCKDialogCommand('SyntaxHighlighter', '插入代码', FCKPlugins.Items['syntaxhighlighter'].Path + 'dialog.html', 400, 300));
 // 注册工具栏按钮：显示“插入代码”图标
 FCKToolbarItems.RegisterItem('SyntaxHighlighter', new FCKToolbarButton('SyntaxHighlighter', '插入代码', null, null, false, true));
 
 
dialog.html是个简单的弹窗页面，要包含“选择语言”的下拉框和“代码输入框”，比如： 
 html
 
 
 

 
 
 选择语言：
 
 JavaScript
 Python
 Java
 
 
 确定
 
 function insertCode() {
 var lang = document.getElementById('language').value;
 var code = document.getElementById('code').value;
 // 生成SyntaxHighlighter需要的
标签
 var html = '
' + FCKTools.HTMLEncode(code) + '
';
 FCK.InsertHtml(html);
 window.close();
 }


 
 我第一次写fckplugin.js时，把dialog.html的路径写成了FCKPlugins.Items['syntaxhighlighter'].Path + '/dialog.html'（多了个斜杠），结果点按钮没反应——后来用浏览器“检查元素”看网络请求，发现报“404找不到dialog.html”，才意识到路径错了，去掉斜杠就好了。

给FCKeditor“开权限”——修改配置文件
现在插件放好了，得让FCKeditor“认出”这个插件。找到FCKeditor根目录的fckconfig.js文件，加两行代码：
注册插件：FCKConfig.Plugins.Add('syntaxhighlighter', 'zh-cn');（后面的zh-cn是语言包，不用改）；
加工具栏按钮：找到FCKConfig.ToolbarSets['Default']（或你用的工具栏名称，比如Basic），在数组里加'SyntaxHighlighter'——比如原代码是['Bold','Italic','-','Link','Unlink']，改成['Bold','Italic','-','Link','Unlink','-','SyntaxHighlighter']。 
为什么要加这行？因为FCKeditor的工具栏按钮是“白名单制”，你不加，就算插件注册了，按钮也不会显示。我朋友之前就是漏了这步，折腾了一小时才发现“原来按钮要手动加进去”。

让前端页面“认识”代码——配置渲染逻辑
最后一步，要让你发布的文章页面能“读懂”FCKeditor插入的代码，并用SyntaxHighlighter渲染。在文章详情页的
里加这些代码：html
<!-
引入SyntaxHighlighter的样式（决定高亮的外观） >
 <!-
默认主题，可换成其他主题 >
<!-
引入SyntaxHighlighter的核心JS和需要的语言 brush（比如要高亮Python，就得引shBrushPython.js） >
 <!-
JavaScript >
 <!-
Python >
 <!-
Java >
<!-
让SyntaxHighlighter自动渲染页面中的代码 >
 SyntaxHighlighter.all();
这里要注意：brush文件要按需引——你要高亮什么语言，就引对应的brush文件（比如高亮PHP要加shBrushPhp.js）。我之前帮朋友加了Python的brush，结果他插入Java代码时，代码变成了“纯文本”，查了才发现没引shBrushJava.js——SyntaxHighlighter是“按需渲染”，不认识的语言不会高亮。
整合时最容易踩的5个坑，我替你踩过了
我整合过4次FCKeditor+SyntaxHighlighter，踩过的坑能凑成“避坑手册”，下面这5个是高频踩雷点，90%的人都会中招，提前给你打预防针。
坑1：文件路径“差一个斜杠”，导致按钮不显示/高亮失效
症状：点击“插入代码”按钮没反应，或页面报“404找不到shCore.css”； 原因：路径引用错误——比如你把SyntaxHighlighter的styles文件夹放在了/fckeditor/plugins/syntaxhighlighter/里，但页面里引的是/syntaxhighlighter/styles/shCore.css，肯定找不到； 解决办法： 
用绝对路径代替相对路径（比如/syntaxhighlighter/styles/shCore.css比../styles/shCore.css靠谱）； 
用浏览器的“检查元素→网络”面板看请求：如果某个文件显示“404”，直接复制请求路径到地址栏，调整到能打开为止。 
我朋友第一次犯的错更离谱——他把SyntaxHighlighter的文件放在了/blog/fckeditor/plugins/里，结果页面引的是/syntaxhighlighter/，折腾了两小时才发现“文件夹放错位置了”。
坑2：配置项“漏写一行”，导致工具栏没按钮
症状：插件部署好了，但FCKeditor工具栏里没有“插入代码”按钮； 原因：fckconfig.js里漏了注册插件或加工具栏按钮的代码； 解决办法：再检查fckconfig.js的两个关键位置： 
有没有FCKConfig.Plugins.Add('syntaxhighlighter', 'zh-cn');？ 
有没有把'SyntaxHighlighter'加到FCKConfig.ToolbarSets里？ 
别笑，我第三次整合时，自己都漏写了第二行，盯着工具栏看了五分钟，才反应过来“哦，按钮没加进去啊”。
坑3：样式“打架”，导致代码高亮变“丑八怪”
症状：代码能高亮，但背景是白色、字体特别小，或行号错位； 原因：你网站的原有CSS和SyntaxHighlighter的样式冲突了——比如很多博客会给pre标签加margin:0;padding:0;font-size:12px;，而SyntaxHighlighter的pre.syntaxhighlighter需要padding:1em;margin:1em;font-size:14px;； 解决办法：给SyntaxHighlighter的样式加“优先级”，比如把shCore.css里的pre.syntaxhighlighter改成： 
css
body pre.syntaxhighlighter {
 padding: 1em !important; / 覆盖原有样式 /
 font-size: 14px !important;
 background-color: #f5f5f5 !important;
}

（尽量不用
!important，实在解决不了再用）。我朋友的博客给pre加了background:#fff;，结果SyntaxHighlighter的灰色背景被覆盖，后来加了body pre.syntaxhighlighter的优先级，才恢复了默认样式。

坑4：brush文件“漏引一个”，导致某类代码不高亮
症状：插入Python代码能高亮，但Java代码不行； 原因：没引对应语言的brush文件——SyntaxHighlighter是“插件式”，每个语言对应一个brush文件，不引就不认识； 解决办法：对照你要支持的语言，把brush文件引全，比如： 
JavaScript：
shBrushJScript.js； 

Python：
shBrushPython.js； 

Java：
shBrushJava.js； 

HTML/CSS：
shBrushXml.js（能同时高亮HTML和CSS）。 

我之前帮做后端的朋友整合时，他要高亮Go代码，结果没找到
shBrushGo.js——后来查SyntaxHighlighter官方文档才知道，Go语言需要自己下载第三方brush文件（https://github.com/lexrupy/SyntaxHighlighter-brush-gonofollow），不是所有语言都自带。

坑5：没“测试不同浏览器”，导致上线后翻车
症状：Chrome里能高亮，但Firefox/Edge里不行； 原因：不同浏览器对CSS/JS的解析有差异——比如Firefox对pre标签的white-space属性更严格，容易导致代码换行错乱； 解决办法：整合完后，必须在3个浏览器（Chrome、Firefox、Edge）里测试，重点看： 

按钮能不能打开弹窗； 
插入的代码能不能高亮； 
样式有没有错位。 
我去年帮一个做技术文档的客户整合，上线前只测了Chrome，结果Firefox里代码的行号和内容重叠了——后来调整了
shCore.css里的padding-left属性（从3em改成4em），才解决了Firefox的兼容问题。
为了让你更快定位问题，我整理了常见问题排查表，遇到问题直接“对号入座”：



问题现象
可能原因
解决方法




工具栏无“插入代码”按钮
fckconfig.js漏写注册/工具栏代码
检查fckconfig.js的Plugins.Add和ToolbarSets配置


代码不高亮
未引对应brush文件/路径错误
检查brush文件引用，确保路径正确


样式混乱（字体小/背景白）
原有CSS与SyntaxHighlighter冲突
给SyntaxHighlighter样式加优先级（如body pre.syntaxhighlighter）


页面崩溃/加载慢
JS冲突（如jQuery版本不一致）
调整JS加载顺序，或用jQuery.noConflict()


Firefox里行号错位
CSS兼容问题
调整shCore.css里的pre.syntaxhighlighter的padding-left值



其实整合FCKeditor和SyntaxHighlighter，核心就两个字：仔细——路径仔细核对，配置仔细检查，测试仔细覆盖。你要是按我讲的步骤做，99%能成。对了，整合完后记得插入一段Python代码试试：比如 print("Hello, SyntaxHighlighter!")，如果能显示黄色的print和引号里的字符串，就说明成了。要是遇到卡住的地方，欢迎在评论区留个言，我帮你参谋参谋—— 踩过坑的人，最懂怎么爬出来。

整合FCKeditor和SyntaxHighlighter时，版本选不对会有什么问题？
FCKeditor 选2.x或3.x版本（比如2.6.11），经典版更适配老项目；SyntaxHighlighter得选3.0以上版本（比如3.6.0），2.x版本依赖旧版jQuery，容易和FCKeditor的原生JS冲突。我之前帮朋友用了SyntaxHighlighter 2.1，结果页面报“$ is not defined”，换成3.6.0才解决。
FCKeditor整合SyntaxHighlighter后，按钮不显示或高亮失效，大概率是哪里错了？
大多是文件路径引用错误，比如把SyntaxHighlighter的styles文件夹放错位置，或者页面里用了相对路径（比如../styles/shCore.css）。 用绝对路径（比如/syntaxhighlighter/styles/shCore.css），再用浏览器“检查元素→网络”面板看请求，要是文件显示404，调整路径到能打开为止。我朋友之前把文件夹放错到/blog/fckeditor里，折腾两小时才发现。
为什么部署了SyntaxHighlighter插件，FCKeditor工具栏里没有插入代码的按钮？
FCKeditor的工具栏是“白名单制”，得在fckconfig.js里做两件事：一是加FCKConfig.Plugins.Add('syntaxhighlighter', 'zh-cn')注册插件，二是把'SyntaxHighlighter'加到工具栏数组里（比如FCKConfig.ToolbarSets['Default']里加这个关键词）。漏了任何一步，按钮都不会显示，我自己第三次整合时都漏写过第二行，盯着工具栏看了五分钟才反应过来。
代码能高亮但样式特别丑，比如背景白、字体小，怎么办？
这是你网站原有CSS和SyntaxHighlighter的样式冲突了，比如博客给pre标签加了margin:0、font-size:12px，覆盖了SyntaxHighlighter的默认样式。解决办法是给SyntaxHighlighter的样式加优先级，比如把shCore.css里的pre.syntaxhighlighter改成body pre.syntaxhighlighter，再加上!important（尽量不用，但实在解决不了再用）。我朋友的博客就因为pre标签背景色冲突，后来加了优先级才恢复灰色背景。
插入某类代码（比如Java）时不高亮，是哪里没做好？
大概率是漏引了对应语言的brush文件，SyntaxHighlighter每个语言都需要对应的brush（比如Java要引shBrushJava.js，Python要引shBrushPython.js）。要是遇到Go这种自带没有的语言，还得去GitHub下第三方brush文件（比如lexrupy的SyntaxHighlighter-brush-go）。我之前帮后端朋友整合时，没引shBrushJava.js，结果Java代码不高亮，补上之后立马好了。

			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.mayiym.com/54694.html，转载请注明出处。