让小程序和wordpress支持markdown

Posted 2022-12-15 ijianbo

从微慕小程序专业版v3.8.0开始引入了mp-html组件，用于解析富文本的内容，该组件的功能强大，完美支持html大部分的标签，同时支持代码高亮 。

mp-html提供的markdown插件，可以在富文本的文件解析markdown，于是我尝试引入了mp-html的markdown插件，但发现解析不了，反复尝试还是不行，仔细调试代码后发现原因是：如果一段富文本里有html标签文本和mardown标记文本混在一起，是无法区分两者，因此在解析的时候都按html解析了。由于微慕小程序是通过wordpress 的rest api获取文章内容的，在wordpress编辑文章保存的时候会自动加入p标签等html的标签，无法把里面的markdown标记区分出来，导致无法正确的解析。如果想在wordpress 文章里的局部内容来显示markdown用wp-html的markdown插件是无法实现的。那么在wordpress里直接把markdown直接解析成HTML标签后后，在小程序里直接显示出来，是一种相对比较简单的方法，也可以同时兼容web端和小程序。

如果想在wordpress的文章的局部内容显示markdown，采用短代码是最简单的方式，只解析被短代码包围的markdown标记语言内容即可，其余的内容依然采用html标签。解析markdown语法，我用的开源代码：parsedown。实现的方式步骤如下：

1.下载parsedown的文件Parsedown.php，并在wordpress的主题的functions.php文件里引入该文件

include(get_stylesheet_directory() . '/Parsedown.php');

2.加入markdown短代码注册。在wordpress的主题的functions.php文件里加入代码：

function markdown($atts, $content)
   
    $Parsedown = new Parsedown();
    $Parsedown->setSafeMode(true);
    $markdown=$Parsedown->text(wp_filter_nohtml_kses($content));  
    return $markdown;      

add_shortcode ( 'markdown' , 'markdown' ) ;

4、在编辑文章时，加入markdown短代码

[markdown]
# 一级标题
## 二级标题
### 三级标题
[/markdown]