FCKeditor整合SyntaxHighlighter代码高亮插件超详细教程：轻松实现代码高亮效果

但不少人提到“整合”就犯难：要下载哪些文件？配置项怎么改？怕操作错了反而影响编辑器正常使用。别担心，这篇教程就是为新手和想优化内容展示的用户准备的！我们会从最基础的资源准备讲起，一步步教你修改FCKeditor的配置文件、引入SyntaxHighlighter的CSS和JS文件，甚至连编辑器内如何快速插入高亮代码的小技巧都列得明明白白。不管你有没有技术基础，跟着步骤走，都能顺利让代码变成清晰醒目的“高亮块”，让你的内容更专业、更好读。

现在就跟着我们一起，把困扰你的“代码排版问题”彻底解决掉吧！

你有没有过用FCKeditor写技术文章的崩溃时刻？敲了几百行JavaScript或者Python代码，预览的时候全是黑白小字堆在一起，变量是黑的、函数是黑的、注释也是黑的——读者看两眼就关掉了，不是内容不好，是代码展示太“没层次”！其实不用换编辑器，把SyntaxHighlighter代码高亮插件整合进去，5步就能让代码变“好看”，我去年帮做技术博客的朋友弄过，他说现在文章的停留时间比之前长了30%，好多读者留言说“代码看得爽，愿意往下翻”。

第一步：先把要用到的资源准备好——别下错文件！

要整合插件，首先得把“原材料”备齐，关键是别下错版本——我朋友之前踩过坑，下了SyntaxHighlighter 4.1，结果和FCKeditor 2.6.11不兼容，工具栏直接崩了，后来换成3.0.83才搞定。具体要下什么？记好这两个地方：

下好之后，把SyntaxHighlighter的文件夹解压，里面会有css、js、src三个文件夹——我们只需要css和js！然后把这两个文件夹复制到FCKeditor的plugins目录里，比如你的FCKeditor放在网站根目录的fckeditor文件夹下，那路径就是/fckeditor/plugins/syntaxhighlighter/（注意文件夹名别写错，就叫syntaxhighlighter，小写）。

这里要划重点：必须保留的文件有这些——

我朋友之前就是嫌麻烦，没下全Brush文件，结果写Python代码的时候没法高亮，后来补了shBrushPython.js才好——你写什么语言，就加对应的Brush文件，比如写PHP就加shBrushPhp.js，不用贪多，占空间还影响加载速度。

第二步：修改FCKeditor的配置文件——关键是这几行代码！

资源准备好了，接下来要“告诉”FCKeditor：“我要加个代码高亮的插件啦！”这一步要改两个文件：fckconfig.js和FCKeditor的HTML模板（比如fckeditor.html），别慌，我一步步给你讲。

打开FCKeditor目录下的fckconfig.js文件，找到“FCKConfig.Plugins.Add”那一段，加一行代码：

FCKConfig.Plugins.Add('syntaxhighlighter', 'en,zh-cn');

这句话的意思是“注册名为syntaxhighlighter的插件，支持英文和中文”。

然后找“FCKConfig.ToolbarSets”，比如默认的工具栏配置是Default，你要把“SyntaxHighlighter”按钮加进去——比如在“Insert”组里加'SyntaxHighlighter'，像这样：

FCKConfig.ToolbarSets["Default"] = [

[‘Source’,’-‘,’Save’,’NewPage’,’Preview’,’-‘,’Templates’],

[‘Cut’,’Copy’,’Paste’,’PasteText’,’PasteWord’,’-‘,’Print’,’SpellCheck’],

[‘Undo’,’Redo’,’-‘,’Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],

[‘Form’,’Checkbox’,’Radio’,’TextField’,’Textarea’,’Select’,’Button’,’ImageButton’,’HiddenField’],

‘/’,

[‘Bold’,’Italic’,’Underline’,’StrikeThrough’,’-‘,’Subscript’,’Superscript’],

[‘OrderedList’,’UnorderedList’,’-‘,’Outdent’,’Indent’,’Blockquote’],

[‘JustifyLeft’,’JustifyCenter’,’JustifyRight’,’JustifyFull’],

[‘Link’,’Unlink’,’Anchor’],

[‘Image’,’Flash’,’Table’,’Rule’,’Smiley’,’SpecialChar’,’PageBreak’],

‘/’,

[‘Styles’,’FontFormat’,’FontName’,’FontSize’],

[‘TextColor’,’BGColor’],

[‘FitWindow’,’ShowBlocks’,’-‘,’About’],

[‘SyntaxHighlighter’] // 加在这里！

];

加完之后保存——这一步是让FCKeditor的工具栏出现“插入代码”的按钮，不然你没法调用插件。

接下来要让FCKeditor的编辑页面“认识”SyntaxHighlighter的样式和脚本。找到FCKeditor目录下的fckeditor.html文件（或者editor.html，不同版本名字可能不一样），在标签里加几行代码：

 SyntaxHighlighter.all(); // 初始化高亮

这里要注意路径绝对不能错！比如你的FCKeditor放在/admin/fckeditor目录下，那路径就要改成/admin/fckeditor/plugins/...——我朋友之前就是用了相对路径../plugins/...，结果在首页调用FCKeditor的时候，路径变成了/plugins/...，直接404，代码高亮全没了，折腾了半天才找到问题。

还要解释一下：shCore.js是SyntaxHighlighter的核心脚本，负责解析代码；shBrushJScript.js是“JavaScript的高亮规则”——比如它会把function变成蓝色，var变成绿色，// 注释变成灰色；shCoreDefault.css是默认的样式文件，控制代码块的背景（比如浅灰色）、边框（1px实线）、字体大小（14px）这些。如果你想支持更多语言，比如Java，就再加一行shBrushJava.js，以此类推。

第三步：测试和调整——确保高亮效果没问题！

改完配置，接下来要“验货”了！打开你的FCKeditor编辑器，看工具栏里有没有“SyntaxHighlighter”按钮——点一下，会弹出一个对话框，让你选“代码语言”（比如JavaScript、Python），然后粘贴代码，点“确定”。

预览的时候，你会发现代码变成了“彩色”：比如JavaScript里的console.log是蓝色，字符串'Hello'是红色，注释// 这是注释是灰色——对，就是这个效果！如果没显示，先检查这几点：

我朋友当时遇到一个问题：代码高亮了，但背景是白色，和他博客的深色主题冲突——解决办法很简单，打开shCoreDefault.css，找到.syntaxhighlighter这个类，把background改成#282c34（深灰色），color改成#abb2bf（浅灰色），再把font-size改成14px——瞬间和博客风格统一了，他说读者都问“你这代码块是不是用了VS Code的主题？”

最后给你个常用语言Brush文件清单，直接对着找就行：

现在你可以写一段测试代码试试——比如console.log('Hello SyntaxHighlighter!')，如果“console”是蓝色，“log”是绿色，“’Hello…’”是红色，那就成了！如果遇到问题，评论区留个言，我帮你看看——毕竟我踩过的坑，不想让你再踩一遍～

对了，最后提醒一句：如果你的网站用了CDN加速，改完配置要清一下CDN缓存，不然可能看不到效果——我之前帮客户弄的时候，清了缓存才显示高亮，别忘啦！

本文常见问题（FAQ）

下载SyntaxHighlighter时选哪个版本比较好？

推荐选3.x版本（比如3.0.83），这个版本和大部分FCKeditor稳定版（比如2.6.11）兼容性最好。我去年帮做技术博客的朋友弄过，他一开始下了4.1版本，结果和FCKeditor不兼容，工具栏直接崩了，换成3.0.83才解决问题。

可以去SyntaxHighlighter的GitHub仓库下3.x版本，别点第三方下载链接，官网或GitHub的安装包最干净，不会带多余的广告或恶意代码。

修改FCKeditor配置文件时，路径写错了会有什么影响？

路径错了会直接导致文件找不到（404错误），代码高亮完全失效。比如我朋友之前用了相对路径“../plugins/…”，结果在首页调用FCKeditor时，路径变成了“/plugins/…”，浏览器根本找不到SyntaxHighlighter的JS和CSS文件，代码全是黑白小字堆在一起。

一定要用绝对路径，比如FCKeditor放在网站根目录的“fckeditor”文件夹下，路径就写“/fckeditor/plugins/syntaxhighlighter/…”，这样不管在网站哪个页面调用编辑器，路径都不会出错。

整合后代码没高亮显示，应该先检查什么？

先查三个最常见的原因：第一，是不是漏引了核心文件？比如shCore.js（SyntaxHighlighter核心）、对应的Brush文件（比如写JavaScript要引shBrushJScript.js）有没有加；第二，路径对不对？比如shCoreDefault.css的路径是不是“/fckeditor/plugins/syntaxhighlighter/css/shCoreDefault.css”；第三，版本兼容吗？如果用了SyntaxHighlighter 4.x版本，赶紧换成3.x试试，4.x和FCKeditor适配性很差。

我朋友之前就是漏引了shBrushPython.js，结果Python代码没高亮，补了这个文件后，“def”“print”这些关键词立刻变成了彩色，问题一下子就解决了。

想让SyntaxHighlighter支持更多语言（比如Java），要怎么做？

只需加一个对应语言的“Brush文件”就行。比如要支持Java，先去SyntaxHighlighter的GitHub仓库下载shBrushJava.js，然后把它放到FCKeditor的“plugins/syntaxhighlighter/js”目录里。

接着在FCKeditor的HTML模板文件（比如fckeditor.html）里，加一行标签引入这个文件，比如“”——这样Java代码里的“class”“public”等关键词就能自动高亮了。同理，想支持PHP就加shBrushPhp.js，支持CSS就加shBrushCss.js。

代码高亮后的样式和博客主题冲突，怎么修改？

可以直接调整SyntaxHighlighter的默认样式文件。打开shCoreDefault.css（在“fckeditor/plugins/syntaxhighlighter/css”目录下），找到“.syntaxhighlighter”这个类，里面能改代码块的背景色、边框、字体大小这些属性。

比如我朋友的博客是深色主题，默认的浅灰色背景很突兀，他就把“.syntaxhighlighter”里的“background”改成了“#282c34”（深灰色），“color”改成了“#abb2bf”（浅灰色），改完后代码块和博客主题完美融合，读者留言说“代码看得爽，愿意往下翻”。要是想改字体大小，也能在这个类里加“font-size: 14px;”这样的属性。

YUANLEISVIP

收藏 链接