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

这篇具有很好参考价值的文章主要介绍了Crayon Syntax Highlighter代码高亮插件与fancybox图片暗箱冲突的解决方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

其实,这是一个历史遗留问题,在最开始建站的时候就已经出现了,在知更鸟主题和Crayon Syntax Highlighter这个插件之间,我最终选择了前者。
在知更鸟主题环境下启用Crayon Syntax Highlighter插件,会出现如下冲突情况:
①、图片暗箱失效
②、下载暗箱失效
③、公告不能滚动
刚接触建站时,张戈也是一个绝对的菜鸟,除了运维啥都不会,出现这些问题时,只能舍弃其中一个。。。
随着接触建站时间的增长,已经能够编写一般的php和js脚本、会修改绝大部分网站功能了。这次给公司做百科网站时,再一次用到了Crayon Syntax Highlighter这个插件,依然如同初恋,爱不释手!
秉着再次重逢,绝不放手的心态,决心要让知更鸟和Crayon Syntax Highlighter插件共存!
一、冲突分析
熟练的按下F12,开始debug:

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

头部已加载JQ:

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

看来是插件未判断JQ环境,就强行加载导致了冲突!
二、着手解决
网上随便搜了一把,就找到了避免JQ重复加载的方法。将如下代码添加到主题的function.php当中即可:

PHP Code复制内容到剪贴板
  1. //禁止加载默认jq库   
  2. if ( !is_admin() ) { // 后台不禁止   
  3. function my_init_method() {   
  4. wp_deregister_script( 'jquery' ); // 取消原有的 jquery 定义   
  5. }   
  6. add_action('init''my_init_method');   
  7. }   
  8. wp_deregister_script( 'l10n' );  

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

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

PHP Code复制内容到剪贴板
  1.   
  2. <?php  </span>if ( is_single() ) { ?>   
  3. >   
  4. /*   
  5. var quicktagsL10n = {"closeAllOpenTags":"\u5173\u95ed\u6240\u6709\u6253\u5f00\u7684\u6807\u7b7e","closeTags":"\u5173\u95ed\u6807\u7b7e","enterURL":"\u8f93\u5165URL","enterImageURL":"\u8f93\u5165\u56fe\u50cfURL","enterImageDescription":"\u4e3a\u56fe\u50cf\u8f93\u5165\u63cf\u8ff0","fullscreen":"\u5168\u5c4f","toggleFullscreen":"\u5207\u6362\u5168\u5c4f\u6a21\u5f0f","textdirection":"\u6587\u672c\u65b9\u5411","toggleTextdirection":"\u5207\u6362\u7f16\u8f91\u5668\u6587\u672c\u4e66\u5199\u65b9\u5411"};   
  6. /* ]]> */  
  7.   
  8.  src='http://res.zhangge.net/wp-includes/js/quicktags.min.js?ver=4.0'>   
  9. >   
  10. /*   
  11. var CrayonSyntaxSettings = {"version":"2.6.6","is_admin":"0","ajaxurl":"http:\/\/zhangge.net\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};   
  12. var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};   
  13. var CrayonTagEditorSettings = {"home_url":"http:\/\/zhangge.net","css":"crayon-te","css_selected":"crayon-selected","code_css":"#crayon-code","url_css":"#crayon-url","url_info_css":"#crayon-te-url-info","lang_css":"#crayon-lang","title_css":"#crayon-title","mark_css":"#crayon-mark","range_css":"#crayon-range","inline_css":"crayon-inline","inline_hide_css":"crayon-hide-inline","inline_hide_only_css":"crayon-hide-inline-only","hl_css":"#crayon-highlight","switch_html":"#content-html","switch_tmce":"#content-tmce","tinymce_button_generic":".mce-btn","tinymce_button":"a.mce_crayon_tinymce,.mce-i-crayon_tinymce","tinymce_button_unique":"mce_crayon_tinymce","tinymce_highlight":"mce-active","submit_css":"#crayon-te-ok","cancel_css":"#crayon-te-cancel","content_css":"#crayon-te-content","dialog_title_css":"#crayon-te-title","submit_wrapper_css":"#crayon-te-submit-wrapper","data_value":"data-value","attr_sep":":","css_sep":"_","fallback_lang":"sh","dialog_title_add":"\u63d2\u5165\u4ee3\u7801\u9ad8\u4eae","dialog_title_edit":"\u7f16\u8f91\u4ee3\u7801\u9ad8\u4eae","submit_add":"\u63d2\u5165","submit_edit":"\u4fdd\u5b58","bar":"#crayon-te-bar","bar_content":"#crayon-te-bar-content","extensions":{"scpt":"applescript","applescript":"applescript","swf":"as","fla":"as","cs":"c#","h":"c++","hh":"c++","hpp":"c++","hxx":"c++","h++":"c++","cc":"c++","cpp":"c++","cxx":"c++","c++":"c++","pas":"delphi","java":"java","class":"java","jar":"java","mv":"miva","mvc":"miva","mvt":"miva","m":"objc","mm":"objc","pl":"perl","py":"python","pyw":"python","pyc":"python","pyo":"python","pyd":"python","rb":"ruby","rbx":"ruby","rhtml":"ruby","vbs":"vb"}};   
  14. var CrayonSyntaxSettings = {"version":"2.6.6","is_admin":"0","ajaxurl":"http:\/\/zhangge.net\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};   
  15. var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};   
  16. /* ]]> */  
  17.   
  18.  src='http://res.zhangge.net/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.te.min.js?ver=2.6.6'>   
  19. <?php  } ?>    
  20.   

全部保存后,代码高亮正常了,公告也动了,尼玛图片暗箱居然点击后会弹出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. "text/css">   
  2. #colorbox {   
  3.    display:none !important;   
  4.  }   
  5.   

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

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

就能隐藏ID为colorbox的弹出图片,从而变相解决了重复弹出的问题!
至此,Crayon Syntax Highlighter插件终于和知更鸟主题和睦共处了!真是不容易啊....
值得注意的是,JQuery请使用1.7~1.8左右版本,太高版本中可能会缺少知更鸟主题部分所需功能。
五、强迫症
作为一个中度强迫症,张戈花了几乎一整天的时间,将博客200多篇文章的高亮代码,纯手工替换为Crayon Syntax Highlighter高亮模式,我勒个去啊,真是累得一逼!!!文章来源地址https://www.toymoban.com/news/detail-415158.html

到了这里,关于Crayon Syntax Highlighter代码高亮插件与fancybox图片暗箱冲突的解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vscode高亮插件——highlight-words(高亮代码、高亮变量、突出显示)

    高亮文字 这个扩展是基于示例VS Code扩展decorator-sample进行调整的,灵感来自于atom-quick-highlight。 它为所有编辑器中出现的每个选定的单词创建一个装饰。 使用方法 您可以通过选择命令面板中的\\\" Highlight Toggle Current \\\"来添加单词,这将突出显示光标处或选择的单词。 要停止突出

    2024年02月16日
    浏览(45)
  • vue+prismjs 网页代码高亮插件

    最近在使用wangEditor的过程中发现编辑器中代码块展示没有问题,但是预览编辑器中的内容样式丢失,看过wangEditor的文档后发现用到了Prism.js,现将使用的经验分享。 打开  babel.config.js ,在module.exports中的plugins添加以下配置,如果原本没有plugins可以手动添加 配置后 babel.con

    2024年02月05日
    浏览(44)
  • 【Unity】智能提示和高亮Shader代码插件

    笔者最近在学习编写unity的shader,这玩意需要的知识本来就多,偏偏VS对shader的CG、HLSL等语音的智能提示不足,因此急需一些手段进行提示。研究结论如下,废话不多说直接上图: (1)在VS中的扩展——管理扩展能够下载到ShaderLabVS,一个免费的shader提示插件,安装流程可以看

    2024年02月13日
    浏览(45)
  • VSCODE-Verilog开发插件/(代码格式化+Verilog文件树显示+一键例化+UCF转XDC+代码错误检查+语法高亮)

    VSCODE插件,可实现功能: 变量对齐 逗号对齐 括号对齐 快捷键:CTRL + L 例化的代码自动复制到剪切板 快捷键:ctrl+shift+p :输入 Convert_instance 正常顺序转换 可实现序号的从小到大的排列 快捷键:ctrl+shift+p :输入 Convert UCF to XDC NORMAL ORDER 或 Convert UCF to XDC SORT ORDER ucf, xdc, do, tcl 语法

    2024年03月10日
    浏览(50)
  • echarts 使用地图,设置背景图片和高亮图片,点击实现高亮显示,更换散点图图片,高亮散点图形,3D悬浮效果展示地图,集成Vue组件

    先看下   需要实现的效果: 第一步 需准备需要的插件  1  注意新版 echarts 的引入方式为:  import * as echarts from \\\'echarts\\\',这里我把 echarts 直接挂载到了Vue上,本项目使用echarts比较多,这样的话很方便,也可以在需要echarts的模块按需引入        在main.js中添加以下代码:

    2024年02月10日
    浏览(58)
  • Unity 基于URP使用HighlightPlus高亮插件

    本文章只说明使用步骤,怎么设定引用HighlightPlus高亮插件,不做详细介绍。 1) 确保已安装Universal Rendering Pipeline渲染管线资产(从Package Manager中查看)。 2) 转到“Project Settings / Graphics”。 3) 双击“Universal Rendering Pipeline asset”资源。   4) 双击“Forward Renderer asset”资源。

    2024年02月12日
    浏览(42)
  • SubLime Text PackageDev 插件高亮规则设置

            作为一名 Android 开发工作者,开发过程中查看日志文件最经常使用的就是 Android Studio 的 Logcat 了,而且最新版本的 AS 的 Logcat 做了调整,友好度有了非常高的提升。 但是有时我们需要看的是后台上传过来的日志,此时 Logcat 就无法发挥作用了,由于我使用的是一台

    2024年02月06日
    浏览(46)
  • Unity 新手向,如何快速利用插件设置高亮状态

    前言: 相信很多小伙伴在开发游戏的过程中,会需要用到物体 高亮 的效果,效果如图所示。  在初学阶段,我们不需要自己去写复杂的shader,而是快速利用插件来解决这一功能的需求。以下是我们本文将会使用到的一款免费的高亮插件: Quick Outline Quick Outline | Particles/Effe

    2024年02月11日
    浏览(36)
  • 【VSCode】设置关键字高亮的插件 | Highlight Word

    本文主要介绍在 VSCode 看代码时,怎样使某个单词高亮显示,主要通过以下三步实现: 安装 highlight-words 插件 配置 highlight-words 插件 设置高亮快捷键F8 工作是嵌入式开发的,代码主要是C/C++的,之前一直用 source insight 4 看代码,最近转到 VSCode ,使用 VSCode 看代码时,发现它居

    2024年02月11日
    浏览(59)
  • Echarts基础-安装语法高亮插件&less-rem转换动态适配大小

    Echarts是一个功能强大的JavaScript开源可视化库,专门用于创建各种图表和数据可视化。 以下是关于Echarts的一些基础介绍: 丰富的图表类型:Echarts提供了包括折线图、柱状图、散点图、饼图、雷达图、地图等多种常见的图表类型,满足不同的数据展示需求。 兼容性良好:它可

    2024年04月10日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包