解决Githuber MD插件代码高亮不能正常工作的问题

2022年5月7日 6240点热度 4人点赞 6条评论

前言

为了博客文章能长期保存，并且方便切换平台，最近转为使用Markdown来编写博客。我用到的插件是WP Githuber MD，但是在使用过程中遇到一些问题。

问题

不能高亮C++ 和C#代码，只要代码块的语言类型是这两种，均无法正常高亮。

经过一些测试，得出以下结论：

不是wordpress 版本问题，切换版本依然无法解决问题。
不是插件冲突问题，单独使用该插件也无法避免这个问题

然后在GitHub 上也看到一些小伙伴关于代码高亮有些许奇奇怪怪的问题，所以只能自己解决。

解决方案

我的解决思路是，不使用WP Githuber MD插件提供的代码高亮模组，将markdown默认的code HTML标签替换为其他成熟的代码高亮插件的标签。

我选择的是Enlighter - Customizable Syntax Highlighter 插件，我比较喜欢他的高亮样式。

操作步骤

安装Enlighter - Customizable Syntax Highlighter插件。
在主题中添加HTML标签转换的PHP代码

function getPar($par,$str){
    $pieces = preg_split($par, $str,-1,PREG_SPLIT_DELIM_CAPTURE);
    $result ='';
    foreach($pieces as $piece){
        $result.=$piece;
    }
    return $result;
}
//转换代码高亮器
function bTagFilter($content) {

        $pattern_full = '{(<pre><code class="language-[\s\S]*?">[\s\S]*?<\/code><\/pre>)}';
        $pattern_full1 ='{<pre><code class="language-[\s\S]*?">([\s\S]*?)<\/code><\/pre>}';
        $pattern_full2 ='{<pre><code class="language-([\s\S]*?)">[\s\S]*?<\/code><\/pre>}';
        //使用短代码的正则分割字符串
        $pieces = preg_split($pattern_full, $content,-1,PREG_SPLIT_DELIM_CAPTURE);
        $new_content = '';
        //遍历所有的字符串 含有段代码的字符串不做自动处理
        foreach($pieces as $piece) {
            if (preg_match($pattern_full, $piece, $matches)) {
                $code = $matches[0];
                $lug = getPar($pattern_full2,$piece);
                $code = getPar($pattern_full1,$piece);
                $code = '<pre class="EnlighterJSRAW" data-enlighter-language="'.$lug.'">'.$code.'</pre>';
                $new_content .= $code;
            } else {
            $new_content .= $piece; }
        }
    return $new_content;
}
add_filter('the_content', 'bTagFilter', 99);

注意：