前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >让小程序和wordpress支持markdown

让小程序和wordpress支持markdown

作者头像
Jianbo
发布2021-08-25 15:03:25
5100
发布2021-08-25 15:03:25
举报
文章被收录于专栏:守望轩守望轩

微慕小程序专业版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文件里引入该文件

代码语言:javascript
复制
include(get_stylesheet_directory() . '/Parsedown.php');

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

代码语言:javascript
复制
function markdown($atts, $content)
{   
    $Parsedown = new Parsedown();
    $Parsedown->setSafeMode(true);
    $markdown=$Parsedown->text(wp_filter_nohtml_kses($content));  
    return $markdown;  
    
}

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

代码语言:javascript
复制
[markdown]
# 一级标题
## 二级标题
### 三级标题
[/markdown]

显示的效果如下:

一级标题

二级标题

三级标题

微慕专业版已经在插件里集成了有关markdown的解析,查看效果可以访问文章:mp-html富文本解析组件效果

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一级标题
    • 二级标题
      • 三级标题
相关产品与服务
网站建设
网站建设(Website Design Service,WDS),是帮助您快速搭建企业网站的服务。通过自助模板建站工具及专业设计服务,无需了解代码技术,即可自由拖拽模块,可视化完成网站管理。全功能管理后台操作方便,一次更新,数据多端同步,省时省心。使用网站建设服务,您无需维持技术和设计师团队,即可快速实现网站上线,达到企业数字化转型的目的。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档