Wordpress 是世界上最为流行的博客工具，很多喜爱编程的同学都使用它写技术博客，涉及到代码时，没有语法高亮是一件让读者头疼的事。

这篇文章就是记录我如何为自己的博客添加代码高亮功能，同时后台支持为代码区块（Gutenberg）设置语法高亮的语言。这是一种通用的方法，可以为任何区块新增想要的功能。

由于不可抗力，文章将会分为两部分，本文为第一部分：

本文需要读者具有一定的 Wordpress 主题开发的基础知识。

将会用到的 API

Wordpress php Api：
  • add_action()
  • wp_enqueue_style()
  • wp_enqueue_script()
  • get_template_directory_uri()
  • is_single()
  • get_post_type()

准备工作

下载 highlightjs 的脚本和样式，并添加到主题目录下。

然后，创建 myguten.js 和 myguten.css 2 个文件到主题目录下。

这样，准备工作就完成了。

语法高亮

Wordpress 调用 highlightjs 很简单，只需要在文章页尾引入并执行 highlightjs 脚本就好了：

// 引入 highlightjs
function add_highlight_scripts() {
    // 如果当前查询的页面是已存在的文章，且文章类型为 post，则引入 highlightjs 包
    if ( is_single() && get_post_type() === 'post' ) {
?>
    <script src="<?php echo get_template_directory_uri() . '/path/to/highlight.pack.js'; ?>"></script>
    <script> 
        // 配置 highlightjs
        hljs.configure({
            useBR: false
        });
        hljs.initHighlightingOnLoad();
    </script>
<?php
    }
}
// 把方法添加到 wp_footer 钩子上
add_action( 'wp_footer', 'add_highlight_scripts' );

然后把 highlightjs 的 css 添加到 wordpress 的样式队列：

// 引入 highlightjs 的 css
function add_highlight_style() {
    // 如果当前查询的页面是已存在的文章，且文章类型为 post，则引入 highlightjs 的样式
    if ( is_single() && get_post_type() === 'post' ) {
        // 加入样式队列
        wp_enqueue_style( 'highlightjscss', get_template_directory_uri() . '/path/to/highlight_js_styles.css' );
    }
}
// 把方法添加到 wp_enqueue_scripts 钩子上
add_action( 'wp_enqueue_scripts', 'add_highlight_style' );

把上述代码添加到 functions.php 里，每当访问文章页时，都会在页尾加入 highlightjs 脚本，当 wp_enqueue_scripts 触发时会加入 highlightjs 的样式，这些样式针对于 code 标签，如果无效，请检查要显示的代码块是否在 code 标签内。

针对特定的语言使用特定的高亮样式

highlightjs 文档里有说明，高亮显示特定的语言需要为 code 标签添加对应的类名，比如说 python：

<code class="python">...<code>

但是我们在编辑文章的时候，原生区块并没有提供选择语言的功能，因此需要自己添加。

有一种比较笨的办法，就是使用代码编辑器，然后手动为每个 code 标签添加类名。

笨，但是有效 :)

可是很烦人，每次都要手动更新，如果代码段数量多的话，简直要命。

所以有必要针对代码区块添加直接选择使用语言的功能，我将在第二部分中介绍添加的方法。