Home

Awesome

wemark - 微信小程序Markdown渲染库

Travis MIT

小程序已原生支持HTML渲染，基本可替代wemark，推荐使用。本库年久失修，目前处于不维护状态，请谨慎使用。

wemark

背景和功能

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

在小程序诞生之前，Markdown的渲染一般需要解析成HTML，然后渲染解析后的HTML。然而小程序并没有提供HTML渲染的功能，因此在wemark诞生之前，几乎所有的Markdown渲染库全部无法在小程序下正常工作。

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

特性

使用方式

  1. 下载并拷贝wemark目录到小程序根目录
  2. 在页面的配置文件中引用wemark组件 
    {
	"usingComponents": {
		"wemark": "../wemark/wemark"
	}
}
  3. WXML中使用：<wemark md="{{md}}" link highlight type="wemark"></wemark>

详细代码可见demo目录，该目录是一个完整的小程序“代码片段”项目，可在wemark根目录先运行npm run copy，然后添加到微信开发者工具的“代码片段”中进行体验。

参数说明：

注：代码高亮会使标签数量和解析后的数据量增大，不排除产生渲染性能问题，请根据实际需要酌情使用。

其它框架中使用

mpvue

mpvue支持引入微信自定义组件，可在页面的.js文件中添加配置，引用wemark，然后在.vue文件的template部分直接使用wemark：

export default {
  config: {
    // 这儿添加要用的小程序组件
    usingComponents: {
      wemark: '../../static/wemark/wemark'
    }
  }
}

<wemark :md="md" link highlight type="wemark"></wemark>

注：为了让mpvue打包时能把wemark包一并打包到dist目录，建议将wemark放置在源码static目录下。

本项目mpvue目录中包含完整的mpvue小程序演示项目，可在wemark根目录运行npm run copy，然后在微信开发者工具中打开使用。

taro

在已有的taro项目中进行如下修改：

  1. 将wemark放入src目录，即src/wemark目录
  2. 设置编译时复制wemark目录，修改config/index.js，在copy设置项中增加wemark，参考如下： 
    copy: {
  patterns: [
    {
      from: 'src/wemark',
      to: 'dist/wemark',
    },
  ],
  options: {
  }
},
  3. 设置taro编译时忽略remarkable.js，继续修改config/index.js，参考如下： 
    weapp: {
  compile: {
    exclude: [
      'src/wemark/remarkable.js',
    ]
  },
  ...
}
  4. 在页面中引入和使用wemark，例如src/pages/index/index.js： 
    config = {
  navigationBarTitleText: '首页',
  usingComponents: {
    wemark: '../../wemark/wemark'
  }
}
state = {
  md: '# heading\n\nText'
}
//...
render () {
  return (
    <View className='index'>
      <wemark md={this.state.md} link highlight type='wemark' />
    </View>
  )
}
  5. 在 global.d.ts 中添加以下内容（仅 typescript 项目） 
    declare namespace JSX {
  interface IntrinsicElements {
    wemark: any
  }
}

本项目taro目录中包含完整的taro小程序演示项目，可在wemark根目录运行npm run copy，然后在微信开发者工具中打开使用。

特别感谢 @Songkeys 全程跟进taro使用事宜，详情见 https://github.com/TooBug/wemark/issues/36 。

附：特性

测试

npm install
npm test

开源协议

MIT

用户列表

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

版本记录

v2.0.0 2019-02-23

v2.0.0-beta2 2018-08-18

v2.0.0-beta1 2018-07-12

v1.2.3 2018-07-05

v1.2.2 2018-01-30

v1.2.1 2017-07-24

v1.2.0 2017-06-30

v1.1.0 2017-01-22

v1.0.0 2016-12-12