用于在小程序中渲染Markdown文本。
众所周知,Markdown的渲染一般需要解析成HTML来渲染。然而小程序并没有提供HTML渲染的功能,甚至连利用JS动态创建UI元素都不可能。因此所有的Markdown渲染库全部无法在小程序下正常工作。
本库可以实现在小程序下渲染Markdown内容,支持图片、表格在内的大部分Markdown特性。
- 下载并拷贝
wemark目录到小程序根目录 - WXSS中引用样式:
@import '../wemark/wemark.wxss' - WXML中引用结构:
<import src="../wemark/wemark.wxml"/> - JS中引用
wemark:var wemark = require('wemark')
首先需要确定一个用于wemark渲染使用的数据名称(默认情况下为wemark),然后在页面的data中指定:
page({
data:{
// 确定一个数据名称
wemark:{}
}
});接下来在Page的生命周期函数(如onReady)中,调用wemark.parse(md, this, options)即可。
具体的参数说明:
md,必填,需要渲染的Markdown字符串this,必填,Page实例options,其它的参数新版小程序图片可以自适应宽高imageWidth,图片的宽度,如包含图片,则为必填,以px为单位name,对应上面指定的数据名称,默认为wemark
// data中的参数和上方确定的数据名称保持一致
<template is="wemark" data="{{...wemark}}"></template>// 引入wemark
var 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 install
npm testMIT
如果你也使用了 wemark,欢迎提 PR 将自己的小程序加入列表
- 修复小程序框架更新后数组判断失效导致渲染失败的问题 #17
- 支持使用
video[poster]属性添加视频封面图 #15 by @kilik52
- 一些渲染细节样式修正 #9 #10
- 图片渲染使用
widthFix模式,不再动态计算高度 #11 #12
- 添加删除线渲染(
~~deleted~~) - 添加HTML视频解析(需求&初始实现 by @littledu)
- 解析功能补齐自动测试
- 基本功能
