Convert Figma logo to code with AI

TooBug logowemark

微信小程序Markdown渲染库

1,283
171
1,283
22
View on GitHub

Top Related Projects

icindy's avatar

wxParse

7,747

wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

sbfkcel's avatar

towxml

2,499

微信小程序HTML、Markdown渲染库

Quick Overview

Wemark is a WeChat Mini Program markdown rendering library. It allows developers to easily convert markdown text into WeChat Mini Program compatible view elements, making it simple to display rich text content in WeChat Mini Programs.

Pros

  • Easy integration with WeChat Mini Programs
  • Supports a wide range of markdown syntax
  • Customizable styles for rendered elements
  • Lightweight and efficient

Cons

  • Limited to WeChat Mini Program environment
  • May not support some advanced markdown features
  • Documentation is primarily in Chinese
  • Requires understanding of WeChat Mini Program development

Code Examples

  1. Basic usage:
Page({
  data: {
    md: '# Hello\n\nThis is **bold** and this is *italic*.'
  },
  onLoad: function() {
    var wemark = require('wemark');
    wemark.parse(this.data.md, this, {
      imageWidth: wx.getSystemInfoSync().windowWidth - 40,
      name: 'wemark'
    })
  }
})
  1. Custom styling:
Page({
  data: {
    md: '# Custom Styled Heading\n\nThis is a paragraph.'
  },
  onLoad: function() {
    var wemark = require('wemark');
    wemark.parse(this.data.md, this, {
      name: 'wemark',
      theme: {
        h1: {
          color: '#ff0000',
          fontSize: 32
        },
        paragraph: {
          color: '#666666',
          fontSize: 16
        }
      }
    })
  }
})
  1. Handling image loading:
Page({
  data: {
    md: '![An image](https://example.com/image.jpg)'
  },
  onLoad: function() {
    var wemark = require('wemark');
    wemark.parse(this.data.md, this, {
      name: 'wemark',
      imageLoad: (src, success, fail) => {
        wx.getImageInfo({
          src: src,
          success: success,
          fail: fail
        })
      }
    })
  }
})

Getting Started

  1. Install wemark in your WeChat Mini Program project:

    npm install wemark

  2. In your page's JavaScript file, require wemark and use it to parse markdown:

    const wemark = require('wemark');

Page({
  data: {
    md: '# Hello Wemark\n\nThis is a **markdown** example.'
  },
  onLoad: function() {
    wemark.parse(this.data.md, this, {
      name: 'wemark'
    });
  }
});

  3. In your page's WXML file, add the wemark template:

    <import src="../../wemark/wemark.wxml"/>
<template is="wemark" data="{{wemark}}"/>

  4. In your page's WXSS file, import wemark styles:

    @import '../../wemark/wemark.wxss';

Competitor Comparisons

icindy logo

wxParse

7,747

wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析

Pros of wxParse

  • Supports a wider range of HTML tags and attributes
  • Offers more customization options for rendering
  • Includes support for both Markdown and HTML parsing

Cons of wxParse

  • Larger file size and potentially slower performance
  • Less actively maintained, with fewer recent updates
  • More complex setup and usage compared to wemark

Code Comparison

wxParse:

var WxParse = require('../../wxParse/wxParse.js');
Page({
  onLoad: function () {
    var article = '<div>Hello, wxParse!</div>';
    WxParse.wxParse('article', 'html', article, this, 5);
  }
})

wemark:

var wemark = require('wemark');
Page({
  onLoad: function () {
    wemark.parse('# Hello, wemark!', this, {
      imageWidth: 690,
      name: 'wemark'
    })
  }
})

Both wxParse and wemark are libraries for rendering rich text in WeChat Mini Programs. wxParse offers more comprehensive HTML support and customization options, while wemark focuses specifically on Markdown rendering with a simpler API. wxParse may be better suited for complex HTML content, whereas wemark is more lightweight and easier to implement for Markdown-specific use cases.

sbfkcel logo

towxml

2,499

微信小程序HTML、Markdown渲染库

Pros of towxml

  • Supports both Markdown and HTML parsing
  • Offers more customization options for styling and rendering
  • Includes built-in support for LaTeX math expressions

Cons of towxml

  • Larger file size and potentially higher resource usage
  • More complex setup and configuration process
  • May have a steeper learning curve for beginners

Code Comparison

wemark:

var wemark = require('wemark');
wemark.parse(markdown, {
  imageWidth: 0,
  name: 'wemark'
}, function(err, rendered) {
  // rendered is an object containing the parsed result
});

towxml:

const Towxml = require('towxml');
const towxml = new Towxml();
let result = towxml.toJson(markdown, 'markdown');
this.setData({article: result});

Both libraries offer straightforward parsing of Markdown content, but towxml provides additional options for HTML parsing and more advanced rendering features. wemark focuses on simplicity and ease of use, while towxml offers more flexibility and customization at the cost of increased complexity.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

wemark - 微信小程序Markdown渲染库

Travis MIT

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

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使用事宜，详情见 https://github.com/TooBug/wemark/issues/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

  • 基本功能