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

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

怎么用？

首先，去 prism.js官网下载对应的CSS代码和JS代码；

将下载好的代码上传到到服务器上你所使用的主题文件夹下；

找到 functions.php(如果是本地环境的话，可以看到它就在主题文件夹下)；

在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');

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

你的代码写在这里

注意：

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

line-numbers 插件

最后上一张效果图：

prism.js代码高亮效果

遇到的坑：

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