php / wordpress · 2024 年 6 月 7 日

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

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

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

经过一些测试,得出以下结论:

不是wordpress 版本问题,切换版本依然无法解决问题。
不是插件冲突问题,单独使用该插件也无法避免这个问题
然后在GitHub 上也看到一些小伙伴关于代码高亮有些许奇奇怪怪的问题,所以只能自己解决。

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

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

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

在funtions.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);