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

2019-02-19 11:53:16于海丽
  • var CrayonSyntaxStrings = {"copy":"u4f7fu7528 %s u590du5236uff0cu4f7fu7528 %s u7c98u8d34u3002","minimize":"u70b9u51fbu5c55u5f00u4ee3u7801"};    /* ]]> */  
  • </script>    <script type='text/javascript' src='http://res.zhangge.net/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.te.min.js?ver=2.6.6'></script>   
  • <?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属性就搞定了!
    解决办法:将以下代码添加到上面的高亮代码当中:

    CSS Code复制内容到剪贴板
    1. <style type="text/css">    #colorbox {   
    2.    display:none !important;     }   
    3. </style>  

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

    CSS Code复制内容到剪贴板
    1. #colorbox {       display:none !important;   
    2.  }  

    就能隐藏ID为colorbox的弹出图片,从而变相解决了重复弹出的问题!
    至此,Crayon Syntax Highlighter插件终于和知更鸟主题和睦共处了!真是不容易啊....
    值得注意的是,JQuery请使用1.7~1.8左右版本,太高版本中可能会缺少知更鸟主题部分所需功能。
    五、强迫症

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