计算机科学

今天把wordpress升级到了最新的5.3版本，编辑器什么的都发生了天翻地覆的巨变(这就是自己不写网站的后果…)，之前一直使用的WP-Editor也不幸挂了，作者还没有针对5.3版本的进行适配，还好找到了另一个MD编辑器WP-githuber，一个台湾人开发的。用的什么都没有太大的问题，但是，高亮代码块竟然只针对编辑器有效？！简直不能忍。

爬搜索引擎为了解决页面代码块高亮的问题，无一例外的都是装插件，关键是插件都是很老的插件了，网上推荐的几个可以使用的插件比如Enlighter什么的，都太重量级了，完全用不到那么多的功能。最后还是找了两篇关于Prism.js的文章，决定自己动手来搞。

  1. 首先去Prism.js的官网下载根据用户喜好生成的js文件和css文件。
  2. 上传文件到主题目录下面，一定是当前主题目录！可以根据自己的个人习惯放置到主题目录下面的其他位置。

  3. 在wordpress后台或者服务器端编辑主题目录下面的function.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');

以上步骤就基本上可以解决代码高亮的问题。下面继续为代码添加行号（注意：添加行号需要在PrismJs官网定制js时，就要勾选Plugisn里面的Line Numbers功能）

使用个别MD编辑器后，默认就会自动添加行号，但是我目前手里的编辑器有点问题。pre元素的class属性中languare-xxx和line-numbers的顺序是反的，导致PrismJs无法识别到line-numbers这个属性，到底是什么导致的，后续有事件再慢慢研究。在function.php中添加以下代码暂时性的解决了这个问题：

# 快速替换WordPress文章或评论中的某些文字内容
function wp_replace_text($text_wp){
        $replace = array(
                // '原始文字' => '替换为这些'
                '<pre>' => '<pre class="line-numbers">',
                '<code>' => '<code class="language-php">',
                );
        $text_wp = str_replace(array_keys($replace), $replace, $text_wp);
        return $text_wp;
}
add_filter('the_content', 'wp_replace_text'); //正文

另外，在代码块中存在中文注释的时候，会导致行号有异常，修改Prism.css中的相关代码。

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
    margin-bottom:1.3px; # 新增margin-bottom属性
}

参考资料：