使用 prism.js 实现 Wordpress 代码高亮

Wordpress 有不少插件可以实现代码高亮，但还是最喜欢 prism 的代码高亮风格。

怎么用？

1. 首先，去 prism.js官网下载对应的CSS代码和JS代码；
2. 将下载好的代码上传到到服务器上你所使用的主题文件夹下；
3. 找到 functions.php（如果是本地环境的话，可以看到它就在主题文件夹下）；
4. 在functions.php添加如下这个函数：

# 添加代码高亮
function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/prism.css' 
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism.js'   
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

5. 需要插入代码的时候，使用文本编辑，按照如下格式插入代码块:

<pre class="language-php line-numbers"><code class="language-php">你的代码写在这里</code></pre>

注意：
1.你的代码是哪种语言，将 class 改成哪种语言，2.line-numbers是显示行号的，这个在你下载 prism.css 和 prism.js 需要勾上 line-numbers 插件，它才会生效：

line-numbers 插件

最后上一张效果图：

prism.js代码高亮效果

遇到的坑：

最开始的效果不是上图这样的，行号那里很窄，代码字体和大小我也不是很满意，所以打开 prism.css 和style.css 修改了几行代码。