微信小程序Markdown渲染库（微信小程序markers动态渲染）

wemark - 微信小程序Markdown渲染库

背景和功能

用于在小程序中渲染Markdown文本。

众所周知，Markdown的渲染一般需要解析成HTML来渲染。然而小程序并没有提供HTML渲染的功能，甚至连利用JS动态创建UI元素都不可能。因此所有的Markdown渲染库全部无法在小程序下正常工作。

本库可以实现在小程序下渲染Markdown内容，支持图片、表格在内的大部分Markdown特性。

使用方式

1. 准备工作：

下载并拷贝wemark目录到小程序根目录WXSS中引用样式：@import '../wemark/wemark.wxss'WXML中引用结构：JS中引用wemark：var wemark = require('wemark')

2. JS部分

首先需要确定一个用于wemark渲染使用的数据名称（默认情况下为wemark），然后在页面的data中指定：

page({ data:{ // 确定一个数据名称 wemark:{} }});

接下来在Page的生命周期函数（如onReady）中，调用wemark.parse(md, this, options)即可。

具体的参数说明：

md，必填，需要渲染的Markdown字符串this，必填，Page实例options，其它的参数 imageWidth，图片的宽度，如包含图片，则为必填，以px为单位 新版小程序图片可以自适应宽高name，对应上面指定的数据名称，默认为wemark

3. WXML部分

// data中的参数和上方确定的数据名称保持一致

实例

// 引入wemarkvar wemark = require('../wemark/wemark');// 需要渲染的Markdown文本var md = '# hello, world\n\nI love you, wemark!';Page({ data: { // 确定一个数据名称 wemark:{} }, onReady: function(){ wemark.parse(md, this, { // 新版小程序可自适应宽高 // imageWidth: wx.getSystemInfoSync().windowWidth - 40, name: 'wemark' }) }});

特性

标题段落代码段引用无序列表有序列表粗体强调（斜体）删除线行内代码图片表格HTML标记 视频

测试

npm installnpm test

开源协议

MIT

用户列表

TooNote王者荣耀早知道群里有事 （目测 尝试联系作者确认，没有回应）

如果你也使用了 wemark，欢迎提 PR 将自己的小程序加入列表

版本记录

v1.2.2 2018-01-30

修复小程序框架更新后数组判断失效导致渲染失败的问题 #17

v1.2.1 2017-07-24

支持使用video[poster]属性添加视频封面图 #15 by @kilik52

v1.2.0 2017-06-30

一些渲染细节样式修正 #9 #10图片渲染使用widthFix模式，不再动态计算高度 #11 #12

v1.1.0 2017-01-22

添加删除线渲染（~~deleted~~）添加HTML视频解析（需求&初始实现 by @littledu）解析功能补齐自动测试

v1.0.0 2016-12-12

基本功能

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。