WordPress高亮插件：Crayon Syntax Highlighter加载优化

Crayon Syntax Highlighter是我这种代码控的必装插件。但是，这款插件也有一些小缺憾，比如体积大、拖慢速度、容易产生冲突等。很多博主就是因为这些个原因，才不得不忍痛割爱。

至于冲突问题，上次博客已分享过一次相关教程，感兴趣的可以看看：

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

本文主要是分享Crayon Syntax Highlighter插件的CSS和JS加载优化。

优化原理：禁止Crayon Syntax Highlighter插件js和css的全局自动加载机制，只有检测到文章中存在代码时，才会按需加载，这样解决了所有页面均加载js和css拖慢博客速度的问题。

修改方法：

①、禁止自动加载

后台编辑Crayon Syntax Highlighter插件，利用浏览器 Ctrl+F 依次搜索一下关键词，并注释掉：

self::crayon_theme_css();
self::crayon_font_css();
self::enqueue_resources();

比如搜索到self::crayon_theme_css();，则直接在这行代码前加上双斜杠//屏蔽即可，如图：

其中self::enqueue_resources();有2处，总共4处，全部注释即可。

②、按需加载函数

第①步已经禁止插件在前台输出js和css了，下面部署按需加载函数。

将以下代码添加到WordPress主题目录下的functions.php当中即可实现按需加载：

其中， 最后一个css定义了文章高亮代码的样式，默认是classic.css，若在后台选了其他样式，请按实际更改即可！

Ps：其实第②步中的css和js代码，就是未禁止插件全局加载之前，在页面源代码中复制而来的，只要注意代码中全部使用双引号即可（因为单引号给php了）。如果你看明白了，又无法确认代码中css的路径，也可以在禁用全局加载之前，先从前台网页源代码中复制一份，留作第②步使用即可。

做好以上操作之后，那么只有在文章中存在需要高亮显示的代码时，才会在文章页面输出上方的CSS和JS，从而解决了这款高亮插件全局加载CSS和JS，影响页面加载速度的问题。

教程完毕，希望对你有所帮助！