WP Editor插件代码如何高亮？

共计 697 个字符，预计需要花费 2 分钟才能阅读完成。

1. 问题背景

一直以来都没去处理安装了 Markdown 编辑器后，代码无法高亮的问题，趁着今天升级了下 Ubuntu，花了点时间来折腾。

最主要的是该插件代码高亮就是使用的 prism，所以在编辑阶段的代码会自动使用 prism 的语法，不需要额外设置。不信你可以查看你文章的 html 源码，会有下面的语法：

<pre class="language-c"><code class="language-c">  code_here </code></pre>

最新的 WP Editor 插件已经默认支持 prism 语法。

2. 下载高亮插件

下载地址：https://prismjs.com/index.html

可以选择自己的语言和主题来下载对应的 js 和 css，如下图：

3. 加载代码高亮

在主题目录下创建一个 prism 文件夹，将第 2 步下载得到的 js 和 css 放到该目录
在主题代码 function.php 最后添加如下代码：

function add_prism() {
        wp_register_style(
            'prismCSS',
            get_stylesheet_directory_uri() . '/prism/prism.css' // 自定义路径);
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/prism/prism.js'   // 自定义路径);
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

去刷新下你的文章首页看看吧