我想，大家已经可以看到本站代码框中的效果了。这是使用了一个名为 WP Code Highlight.js 的插件。因为我自己的环境比较特殊，虽然 wordpress 带有强大的编辑器，但我还是习惯 markdown 的书写风格，所以每次插入代码的时候都是用三个反引号实现的。体现在前端就是 pre 包着 code 标签。很难找到一款插件能满足这种情况。一般都是要在插入代码的时候设置一下代码的语言插件才能正确的显示。但这款插件完全不需要你单独设置，几乎安装好久可以看到前端的效果了，而且有非常丰富的主题资源提供你使用。

插件效果

1
2
3
4
5
6
7
8
9
10
11
const add = (...values) => {
  let sum = 0;

  for (let value of values) {
    sum += value;
  }

  return sum;
}

console.log(add(10, 4, 1, 5));
1
2
3
4
5
6
7
#include <stdio.h>

int main(int argc, char* argv[])
{
  printf('Hello C');
  return 0;
}

下载地址

https://cn.wordpress.org/plugins/wp-code-highlightjs/

设置截图