【Wordpress】Crayon Syntax Highlighter 与主题不兼容

写在前面：

很多博主在写一些技术博客的时候，会在博文中添加一些代码，但是在展示的时候代码高亮的话会让博客整体布局更优雅。找到网上的不少插件，最终还是选择了 Crayon Syntax Highlighter 这个插件。江湖称 Wordpress 最强大的代码高亮插件！

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

推荐理由：

• 集成主题编辑器
• 切换行号
• 复制 / 粘贴代码
• 在新窗口中打开代码
• 自动获取博客文章 / 评论中的<pre>…</pre> 进行高亮
• 远程请求缓存
• 可以在一个代码框内混合语言高亮显示
• 可以在行内调用代码高亮
• 支持 <pre> 标记
• 手机 / 触摸屏设备检测
• 鼠标事件交互（例如在工具栏上双击可以全选代码）
• Retina!
• 文件扩展名检测
• 设置实时预览
• 支持修改尺寸，边距，对齐方式，字体大小，行高等等

安装插件：

打开后台，左侧菜单栏，找到插件，点击安装插件， 搜索 Crayon Syntax Highlighter，安装即可~

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

安装完成并启用，然后点击后台菜单栏的设置，找到 Crayon 进行自定义编辑。

遇到问题：

问题1、显示出来的代码块无法点击，右上角的复制/粘贴、展开等功能button点击不起作用：

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

网上找了很多资料，都没有找到原因。后来看到了一篇 整合代码高亮插件Crayon Syntax Highlighter到主题模板 的博客，找到了一些灵感（感谢这位博主分享）：

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

这个说明某些主题的代码中有可能就做了上面的这种不自动加载 jQuery 改动。 这样就导致了某些依赖js文件的插件不起作用。看到这里，我们就不防去验证一下。打开我们一篇有代码的博客，右键检查元素，在 element 中搜索 crayon.min ，果不其然网页元素中只加载了css文件 crayon.min.css :

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

那么接下来，就基本上可以确定是主题本身的问题了，然后我们可以全局找一下主题的哪个文件中有用到下面这行代码：

Shell

wp_deregister_script('jquery'); // JS $handle

果然，我们看到在 cu/info.php 这个文件中，有这样一行，找到他，先注释调：

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

刷新页面（如果有缓存记得清理一下缓存，包括cdn、浏览器缓存），终于我们解放了插件代码的 复制 / 粘贴 等功能了！！

这时候再看一下页面元素，发现 crayon.min.js , 已经正常被加载了~ 感觉心情无比舒畅！！

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

问题2、HTML实体字符转义问题：

在Wordpress中使用 Crayon Syntax Highlighter 时，代码段内的HTML实体不会被解释，导致'<‘显示为’&lt’,’>’显示为’&gt’。

解决方案：打开Crayon Syntax Highlighter的插件设置，找到 Code 部分，勾选上 Decode HTML entities in code , 即可设置将代码段内的HTML实体显示出来。

【Wordpress】Crayon Syntax Highlighter 与主题不兼容

喜欢(1) 打赏