解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

其实,这是一个历史遗留问题,在最开始建站的时候就已经出现了,在知更鸟主题和Crayon Syntax Highlighter这个插件之间,我最终选择了前者。

在知更鸟主题环境下启用Crayon Syntax Highlighter插件,会出现如下冲突情况:

①、图片暗箱失效

②、下载暗箱失效

③、公告不能滚动

刚接触建站时,张戈也是一个绝对的菜鸟,除了运维啥都不会,出现这些问题时,只能舍弃其中一个。。。

随着接触建站时间的增长,已经能够编写一般的php和js脚本、会修改绝大部分网站功能了。这次给公司做百科网站时,再一次用到了Crayon Syntax Highlighter这个插件,依然如同初恋,爱不释手!

秉着再次重逢,绝不放手的心态,决心要让知更鸟和Crayon Syntax Highlighter插件共存!

一、冲突分析

熟练的按下F12,开始debug:

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

看来是JQuery的问题,要不就是重复加载JQ冲突了,要不就是没加载成功,进一步查看源代码:

头部已加载JQ:

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

 

赫然发现底部也加载了JQ:

解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题

看来是插件未判断JQ环境,就强行加载导致了冲突!

二、着手解决

网上随便搜了一把,就找到了避免JQ重复加载的方法。将如下代码添加到主题的function.php当中即可:

保存后,立即试了下效果,发现之前的问题倒是解决了,但是Crayon Syntax Highlighter的浮动标题出了问题,不能动了。查看下源代码,发现不但之前底部加载的JQ没了,而且插件相关的JS也都没了!原来上面的代码是禁止所有由wp_footer函数输出的js啊??

三、基本解决

不过,这算是小问题了,先把上面的代码屏蔽,然后打开文章源代码,把除重复加载的JQ之外的其他代码全部拷贝一份,然后粘贴到footer.php或header.php的相应位置即可:

全部保存后,代码高亮正常了,公告也动了,尼玛图片暗箱居然点击后会弹出2次?关了第一层,里面还有第二层...

四、彻底解决

分别看了一下2层弹出图片的ID,发现是不一样的,一种是鸟哥主题的fancybox-img,另一个是colorbox,我有没安装colorbox暗箱插件,哪来的?

最终发现是Crayon Syntax Highlighter插件的crayon.te.min.js带colorbox暗箱功能,导致同时出现了2次图片弹出!真是冤家聚头。。。

最后,我用了一个简单的方法,就解决了这个问题:

尼玛,不是弹2次么?那我把其中一个hidden不就行了??

于是找到由Crayon Syntax Highlighter插件弹出的那个图片的ID,然后对这个ID设置隐藏CSS属性就搞定了!

解决办法:将以下代码添加到上面的高亮代码当中:

或者,将以下代码添加到主题的style.css当中:

就能隐藏ID为colorbox的弹出图片,从而变相解决了重复弹出的问题!

至此,Crayon Syntax Highlighter插件终于和知更鸟主题和睦共处了!真是不容易啊....

值得注意的是,JQuery请使用1.7~1.8左右版本,太高版本中可能会缺少知更鸟主题部分所需功能。

五、强迫症

作为一个中度强迫症,张戈花了几乎一整天的时间,将博客200多篇文章的高亮代码,纯手工替换为Crayon Syntax Highlighter高亮模式,我勒个去啊,真是累得一逼!!!

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:30   其中:访客  25   博主  5

  1. 超級efly 3 Hong Kong 未知浏览器 Unknow Os 香港 电讯盈科有限公司

    前來支持一下~~不明覺厲

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      没遇到问题,也没仔细看,能明白才怪了。

  2. PHP二次开发 6 来自天朝的朋友 未知浏览器 Unknow Os 山东省济南市 联通

    博主厉害呀,有时间研究就是好。

  3. 热腾网 6 来自天朝的朋友 未知浏览器 Unknow Os 河北省石家庄市 联通

    有时也能见到无效的,一直没有处理过。

  4. 香港云主机 3 来自天朝的朋友 未知浏览器 Unknow Os 重庆市 电信

    没遇到过这种问题,对了。有需要空间、服务器的可以了解下,俗话说货比三家。

  5. pptv官方下载 www.ipptvs.com 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 犀思云(北京)云计算科技有限公司

    技术贴啊 不错

  6. ysbinang 1 来自天朝的朋友 未知浏览器 Unknow Os 黑龙江省哈尔滨市 哈尔滨工业大学

    prettyprint~~~

  7. php粉丝网 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 宽带通

    高亮显示对于用户的体验很好,但许多插件都不怎么完善。

  8. 春风 0 来自天朝的朋友 火狐浏览器 Windows XP 北京市 广东盈世计算机科技有限公司联通节点

    博主,你好。我看到你这篇文章了,我也遇到了相同的问题,不知道是否肯帮忙解决一下。谢谢!

  9. 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

    我的高亮代码插件需要用在评论处给用户使用 但是用这个插件不知道怎么在评论处调用 如果不调用直接用PRE的话有些符号会产生错误 果然这里短代码的那两个符号也发不出来

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

      你在我博客用评论框上的【插代码】功能就知道了。

      • 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

        用的CODE?我试试
        <>
        还是没有显示那两个符号

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

          < ?php echo '发现你还真有点坑。';?>

        • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 8.1 广东省深圳市 电信

          <>测试

          • 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

            <>

          • 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

            • 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

              测试一下

          • 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

            不加空格
            “#include $”
            #include !
            #include
            #include
            #include
            #include
            #include
            #include
            #include ”
            #include \
            #include
            #include
            add space after

          • 七支剑 4 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

            加空格

  10. 同盟源 5 来自天朝的朋友 谷歌浏览器 Windows 7 安徽省芜湖市 电信

    jquery重复加载确实蛋疼

  11. 幻杀博客 5 来自天朝的朋友 火狐浏览器 Windows 10 山东省潍坊市 联通

    我的后边没加载crayon.te.min.js!但是好像不能按需加载了!

  12. boke112导航 5 来自天朝的朋友 谷歌浏览器 Windows XP 广西南宁市 /桂林市

    我用了第二步的代码,文章页和页面已经去除默认的JQ,底部的文章推荐也滚动了,但是自定义文章类型的文章页(博客目录详细页)的默认JQ也成功去除,但是底部文章推荐还是不滚动,不知道是什么原因?

  13. 美容护肤小窍门 3 来自天朝的朋友 谷歌浏览器 Windows 7 湖南省长沙市 电信

    还是没有解决 不滚动 我的站是www.aaccw.com 可以帮我看看吗

  14. Jimmy 1 来自天朝的朋友 火狐浏览器 Windows 8.1 北京市 星光数据中心IDC机房

    博主你好。请问你是用的哪个主题修改的?

  15. 枫子 1 来自天朝的朋友 谷歌浏览器 Mac OS X 10_11_2 云南省昆明市 电信

    感谢博主,我遇到同样的问题,按照你给出的方法解决了。谢谢!

  16. hj 0 Canada 谷歌浏览器 Mac OS X 10_10_5 美国

    博主 在HotNews Pro主题上可以解决吗

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      这个案例就是发生在HotNewspro上

  17. 繁夜 0 来自天朝的朋友 谷歌浏览器 Windows 10 四川省绵阳市 联通

    同样的问题,照着你的思路捋了捋,完美解决了,感谢分享 :mrgreen:

  18. 神魔之塔 Tower of Saviors 0 Taiwan; Republic of China (ROC) 谷歌浏览器 Windows 7 台湾省 中华电信HiNet

    结果:Uncaught ReferenceError: jQuery is not defined
    at diydialog.js?ver=1.2.5.4:37

    要怎么处理

加载中,请稍候...