微信小程序Markdown渲染库
JavaScript
Latest commit 9e7e7ce Jan 22, 2017 @TooBug 添加HTML视频解析功能
Permalink
Failed to load latest commit information.
tests 添加HTML视频解析功能 Jan 22, 2017
wemark 添加HTML视频解析功能 Jan 22, 2017
.travis.yml 添加travis ci自动测试 Jan 9, 2017
README.md 添加HTML视频解析功能 Jan 22, 2017
package.json 添加测试 Jan 9, 2017
screenshot.jpg 1.0.0 Dec 10, 2016

README.md

wemark - 微信小程序Markdown渲染库

Travis MIT

wemark

背景和功能

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

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

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

使用方式

1. 准备工作:

  1. 下载并拷贝wemark目录到小程序根目录
  2. WXSS中引用样式:@import '../wemark/wemark.wxss'
  3. WXML中引用结构:<import src="../wemark/wemark.wxml"/>
  4. JS中引用wemarkvar 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中的参数和上方确定的数据名称保持一致
<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 test

开源协议

MIT

版本记录

v1.1.0 2017-01-22

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

v1.0.0 2016-12-12

  • 基本功能