Skip to content

TooBug/wemark

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

wemark - 微信小程序Markdown渲染库

Travis MIT

wemark

背景和功能

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

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

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

特性

  • 以小程序自定义组件形式提供,可直接引入使用
  • 支持大部分markdown标记的解析、渲染(详细支持情况见下方附录)
  • 支持代码表格、代码高亮、HTML视频等特性
  • 支持使用原生rich-text进行渲染
  • 兼容mpvue等开发框架

使用方式

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

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

参数说明:

  • md,必填,需要渲染的Markdown字符串;
  • link,是否解析链接,如果解析,会使用小程序navigator组件展现,可在小程序内跳转,默认为false
  • highlight,是否对代码进行高亮处理,默认为false
  • type,渲染方式,wemark会使用wemark的数据结构和模板进行渲染,rich-text会使用小程序内置的rich-text组件进行渲染(不支持链接跳转、视频)。

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

其它框架中使用

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使用事宜,详情见 #36

附:特性

  • 标题
  • 段落
  • 代码段(可高亮)
  • 引用
  • 无序列表
  • 有序列表
  • 粗体
  • 强调(斜体)
  • 删除线
  • 行内代码
  • 图片
  • 表格
  • HTML标记
    • 视频

测试

npm install
npm test

开源协议

MIT

用户列表

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

版本记录

v2.0.0 2019-02-23

  • 修复代码高亮开启时部分代码显示错误的问题 #58

v2.0.0-beta2 2018-08-18

  • 修复HTML代码高亮的bug #39

v2.0.0-beta1 2018-07-12

  • 重构代码,使用小程序自定义组件发布,兼容mpvue #34 #32 #24
  • 支持代码高亮 #25
  • 支持链接解析,在小程序内跳转 #37
  • 支持使用小程序富文本组件rich-text渲染
  • 支持“双空格+回车”的软换行渲染 #29

v1.2.3 2018-07-05

  • 支持缩进形式的代码段 #31 by kapeter
  • 修复“##”后不加空格和文字时渲染出错的问题 #27

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

  • 基本功能