1 min read

WordPress 代码高亮插件 Highlight.js

Highlight.js 支持71种程序代码的语法高亮,提供44种样式及各种扩展插件,其中包括 WordPress 插件

但用 WordPress 插件做代码高亮时,Google PageSpeed 测试中,会出现如下建议:

The following external CSS files were included after an external JavaScript file in http://www.zfanw.com/blog/wordpress-add-jquery.html. To ensure CSS files are downloaded in parallel, always include external CSS before external JavaScript.

http://www.zfanw.com/blog/wp-content/plugins/wp-highlightjs/styles/default.css

Highlight.js 插件将 CSS 文件附加到 JS 文件后,并且插件设置中没有提供任何调整顺序的选项。这会导致 CSS 文件不能并行请求。


类似于 Google 提供的第三方库 CDN 服务,Yandex(俄罗斯的搜索引擎) 也有提供类似的公共服务,并且有 highlight.js,我可以在 WordPress 里直接引用 highlight 的 js 与 css 文件,文件出现的顺序就变得可控。

打开 WordPress 的 functions.php 文件,加入如下代码:

<?php
    function zfanw_add_highlight_js(){
        wp_enqueue_style('highlightcss','http://yandex.st/highlightjs/8.0/styles/default.min.css');
        wp_enqueue_script('highlightjs','http://yandex.st/highlightjs/8.0/highlight.min.js',array(),null,true);
    }
    add_action('wp_enqueue_scripts', 'zfanw_add_highlight_js');
?>

最后在 Footer.php 或 Header.php 文件中触发:

<script>hljs.initHighlightingOnLoad();</script>

保存后,highlight.js 会查找页面内的代码片段,自动判断语言类型,并根据 CSS 样式主题高亮显示不同语法。如本页面所示的代码样式。

如果要换掉代码高亮的样式主题,则只要将调用的 CSS 路径替换掉即可,比如,要从默认主题换成 Zenburn 主题:

 wp_enqueue_style('highlightcss','http://yandex.st/highlightjs/8.0/styles/zenburn.min.css');

参考

  1. highlight.js 说明
  2. wp_enqueue_script
报告问题 修订