使用 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');
  1. 需要插入代码的时候,使用文本编辑,按照如下格式插入代码块:
你的代码写在这里

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

使用 prism.js 实现 Wordpress 代码高亮_第1张图片
line-numbers 插件

最后上一张效果图:

使用 prism.js 实现 Wordpress 代码高亮_第2张图片
prism.js代码高亮效果

遇到的坑:

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

你可能感兴趣的:(使用 prism.js 实现 Wordpress 代码高亮)