Crayon Syntax Highlighter代码高亮插件与fancybox图片暗箱冲突的解决方法

Crayon Syntax Highlighter代码高亮插件与fancybox图片暗箱冲突的解决方法攻略

问题描述

当我们同时使用Crayon Syntax Highlighter插件和fancybox插件时，可能会出现以下问题：

1. 图片无法正常弹出到暗箱；
2. 代码片段无法正常高亮。

这是由于插件之间的js代码冲突所致，需要解决这个冲突才能同时正常使用这两个插件。

解决方案

以下提供两种解决方案，供大家参考。

方案一：手动修改代码

这种方案是通过改写插件内部的代码，解决插件之间的冲突问题。

步骤一：备份代码

在进行修改之前，我们需要备份插件的代码。备份方式有很多，这里只提供一种简单的方法。

首先，打开WordPress管理面板，进入“插件”页面，在“Crayon Syntax Highlighter”插件右侧，点击“编辑”按钮。此时会进入编辑页面，可以看到插件的代码。

将代码全部复制到一个新的文件中，并保存。

同样地，我们需要备份“fancybox”插件的代码。备份方法与上述相同。

步骤二：修改代码

对于Crayon Syntax Highlighter插件的代码修改：

在之前备份的代码文件中，搜索如下代码：

jQuery(document).ready(function(){
jQuery('code.language-php').each(function(i, e){hljs.highlightBlock(e)});
});

将其替换为以下代码：

jQuery(document).ready(function(){
if ( typeof hljs !== 'undefined' ) {
jQuery('code.language-php').each(function(i, e){hljs.highlightBlock(e)});
}
});

对于fancybox插件的代码修改：

在fancybox插件的代码文件中，搜索如下代码：

(function($) {
$.fn.fancybox = function(options) {
};
})(jQuery);

将其替换为以下代码：

var cl = $.fn.jquery.split('.'); if(parseInt(cl[0])<=1&&(parseInt(cl[1])<3||parseInt(cl[1])==3&&parseInt(cl[2])<2)){
(function($) {
$.fn.fancybox = function(options) {
};
})(jQuery);
}else{
(function($) {
    $.fn.fancybox = function(options) {
    };
})(jQuery);
}

步骤三：保存代码并测试

将代码修改后，保存文件。然后，我们可以在WordPress管理面板中重启Crayon Syntax Highlighter和fancybox插件，进行测试。如果一切正常，问题就得到了解决。

方案二：使用JS优化器

这种方案是通过使用JS优化器，对插件内部的代码进行压缩，消除冲突。

我们推荐使用Google的Closure Compiler（https://closure-compiler.appspot.com/home）。

步骤一：备份和下载插件的代码

这一步同方案一中的“备份代码”操作。

步骤二：打开Closure Compiler

在Closure Compiler主页中，我们可以看到一个文本框。将我们的代码复制到其中。

接着，需要将Crayon Syntax Highlighter和fancybox的库文件地址添加到“Externs”文本框中。

对于Crayon Syntax Highlighter，需要添加以下代码：

http://codemirror.net/lib/codemirror.js
http://codemirror.net/mode/php/php.js

对于fancybox，需要添加以下代码：

http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js
fancybox.js

其中，“fancybox.js”为备份来的fancybox代码文件的名称。

添加完成后，点击左下方的“Compile”按钮，进行压缩。

步骤三：保存代码及测试

将压缩后的代码保存到对应的文件中，并替换原有的代码。

最后，我们可以在WordPress管理面板中重启Crayon Syntax Highlighter和fancybox插件，进行测试。如果一切正常，问题也得到了解决。

结论

Crayon Syntax Highlighter插件和fancybox插件之间的冲突，是由于js代码的冲突所致。无论是通过手动修改插件代码，还是通过使用JS压缩器消除代码冲突，我们都能比较容易解决这个问题。