Convert Figma logo to code with AI

sbfkcel logotowxml

微信小程序HTML、Markdown渲染库

2,499
317
2,499
51

Top Related Projects

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

32,991

A markdown parser and compiler. Built for speed.

14,258

A bidirectional Markdown to HTML to Markdown converter written in Javascript

Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins available. Used by Facebook, Docusaurus and many others! Use https://github.com/breakdance/breakdance for HTML-to-markdown conversion. Use https://github.com/jonschlinkert/markdown-toc to generate a table of contents.

CommonMark parser and renderer in JavaScript

Quick Overview

Towxml is a lightweight, high-performance HTML and Markdown rendering library for WeChat Mini Programs. It converts HTML and Markdown content into WXML (WeChat Markup Language) format, allowing developers to easily display rich text content in their Mini Program applications.

Pros

  • Supports both HTML and Markdown conversion to WXML
  • Lightweight and optimized for performance in WeChat Mini Programs
  • Customizable styles and themes
  • Actively maintained with regular updates

Cons

  • Limited to WeChat Mini Program environment
  • May require additional configuration for complex layouts
  • Documentation is primarily in Chinese, which may be challenging for non-Chinese speakers

Code Examples

  1. Basic usage:
const towxml = require('towxml');

Page({
  data: {
    article: {}
  },
  onLoad: function() {
    const article = towxml('# Hello World', 'markdown');
    this.setData({ article: article });
  }
});
  1. Converting HTML:
const towxml = require('towxml');

Page({
  data: {
    article: {}
  },
  onLoad: function() {
    const html = '<h1>Hello World</h1><p>This is a paragraph.</p>';
    const article = towxml(html, 'html');
    this.setData({ article: article });
  }
});
  1. Applying custom styles:
const towxml = require('towxml');

Page({
  data: {
    article: {}
  },
  onLoad: function() {
    const markdown = '# Hello World\n\nThis is a **bold** text.';
    const article = towxml(markdown, 'markdown', {
      theme: 'dark',
      events: {
        tap: (e) => {
          console.log('Tapped element:', e.target.dataset._el);
        }
      }
    });
    this.setData({ article: article });
  }
});

Getting Started

  1. Install Towxml in your WeChat Mini Program project:

    npm install towxml
    
  2. In your page's JavaScript file, import and use Towxml:

    const towxml = require('towxml');
    
    Page({
      data: {
        article: {}
      },
      onLoad: function() {
        const markdown = '# Hello Towxml\n\nThis is a sample Markdown text.';
        const article = towxml(markdown, 'markdown');
        this.setData({ article: article });
      }
    });
    
  3. In your page's WXML file, add the following to display the rendered content:

    <towxml nodes="{{article}}"/>
    
  4. Make sure to include the Towxml component in your app.json file:

    {
      "usingComponents": {
        "towxml": "towxml/towxml"
      }
    }
    

Competitor Comparisons

Markdown parser, done right. 100% CommonMark support, extensions, syntax plugins & high speed

Pros of markdown-it

  • More widely adopted and actively maintained
  • Extensive plugin ecosystem for customization
  • Better performance for parsing large documents

Cons of markdown-it

  • Primarily focused on Markdown parsing, lacking built-in HTML rendering
  • Requires additional setup for browser usage
  • Less opinionated, which may require more configuration

Code Comparison

markdown-it:

const md = require('markdown-it')();
const result = md.render('# Hello, world!');
console.log(result);

towxml:

const Towxml = require('towxml');
const towxml = new Towxml();
const result = towxml.toHtml('# Hello, world!');
console.log(result);

Both libraries provide Markdown parsing capabilities, but towxml is specifically designed for WeChat Mini Programs and includes built-in HTML and wxml rendering. markdown-it offers a more flexible and extensible approach, allowing developers to customize the parsing process through plugins and options. While markdown-it is more popular and performant for general use cases, towxml may be a better choice for developers working within the WeChat ecosystem or those who need a more opinionated solution with built-in rendering capabilities.

32,991

A markdown parser and compiler. Built for speed.

Pros of marked

  • Widely adopted and battle-tested in production environments
  • Extensive documentation and community support
  • Highly customizable with options for extending functionality

Cons of marked

  • Focused solely on Markdown parsing, lacking additional features
  • May require additional libraries for advanced rendering capabilities
  • Limited built-in support for custom elements or complex layouts

Code Comparison

marked:

import { marked } from 'marked';

const markdown = '# Hello, world!';
const html = marked(markdown);
console.log(html);

towxml:

const Towxml = require('towxml');
const towxml = new Towxml();

const markdown = '# Hello, world!';
const data = towxml.toJson(markdown, 'markdown');
console.log(data);

Key Differences

  • marked focuses on converting Markdown to HTML, while towxml offers additional output formats like JSON and WXML
  • towxml is specifically designed for WeChat Mini Programs, providing tailored functionality for that platform
  • marked has a larger ecosystem and more frequent updates, whereas towxml caters to a more specific use case

Use Cases

  • Choose marked for general-purpose Markdown parsing and rendering in web applications
  • Opt for towxml when developing WeChat Mini Programs or requiring specialized output formats
14,258

A bidirectional Markdown to HTML to Markdown converter written in Javascript

Pros of Showdown

  • More widely adopted and mature project with a larger community
  • Supports browser-side conversion, making it versatile for both client and server-side use
  • Extensive documentation and examples available

Cons of Showdown

  • Larger file size compared to Towxml
  • May have slower performance for large documents
  • Less focused on WeChat Mini Program integration

Code Comparison

Showdown usage:

var converter = new showdown.Converter();
var html = converter.makeHtml('# Hello, Markdown!');

Towxml usage:

let towxml = new Towxml();
let data = towxml.toJson('# Hello, Markdown!');

Key Differences

  • Towxml is specifically designed for WeChat Mini Programs, while Showdown is a more general-purpose Markdown converter
  • Showdown outputs HTML directly, whereas Towxml produces a JSON structure that can be easily rendered in Mini Programs
  • Towxml includes built-in support for rendering the converted content, while Showdown focuses solely on conversion

Use Cases

  • Choose Showdown for broader web applications and when direct HTML output is needed
  • Opt for Towxml when developing WeChat Mini Programs or when a JSON structure is preferred for rendering

Markdown parser, done right. Commonmark support, extensions, syntax plugins, high speed - all in one. Gulp and metalsmith plugins available. Used by Facebook, Docusaurus and many others! Use https://github.com/breakdance/breakdance for HTML-to-markdown conversion. Use https://github.com/jonschlinkert/markdown-toc to generate a table of contents.

Pros of Remarkable

  • More mature and widely adopted project with a larger community
  • Supports both browser and Node.js environments
  • Highly extensible with plugins and custom rules

Cons of Remarkable

  • Larger bundle size compared to Towxml
  • May require additional configuration for specific use cases
  • Not specifically optimized for WeChat Mini Program environments

Code Comparison

Remarkable:

var md = new Remarkable();
var result = md.render('# Hello, world!');

Towxml:

let towxml = new Towxml();
let result = towxml.toHtml('# Hello, world!');

Key Differences

  • Remarkable is a general-purpose Markdown parser, while Towxml is specifically designed for WeChat Mini Programs
  • Towxml includes built-in support for rendering to both HTML and WXML, making it more suitable for WeChat-specific applications
  • Remarkable offers more customization options and extensibility, but Towxml provides a simpler API for basic Markdown parsing needs

Use Cases

  • Choose Remarkable for broader web and Node.js applications with complex Markdown requirements
  • Opt for Towxml when developing WeChat Mini Programs or when a lightweight, WeChat-optimized solution is needed

CommonMark parser and renderer in JavaScript

Pros of commonmark.js

  • More comprehensive Markdown support, adhering to the CommonMark specification
  • Wider community adoption and active development
  • Extensive documentation and test suite

Cons of commonmark.js

  • Larger file size, potentially impacting load times
  • May be overkill for simpler Markdown parsing needs
  • Less focused on specific platform integration (e.g., WeChat Mini Program)

Code Comparison

towxml:

let Towxml = require('towxml');
let towxml = new Towxml();
let data = towxml.toJson('<h1>Hello World</h1>', 'html');

commonmark.js:

var reader = new commonmark.Parser();
var writer = new commonmark.HtmlRenderer();
var parsed = reader.parse("Hello *World*");
var result = writer.render(parsed);

Key Differences

  • towxml is specifically designed for WeChat Mini Program integration, while commonmark.js is a more general-purpose Markdown parser
  • commonmark.js offers stricter adherence to the CommonMark specification, potentially providing more consistent results across different platforms
  • towxml includes additional features like theme customization and emoji support out of the box

Use Case Considerations

  • Choose towxml for WeChat Mini Program projects requiring Markdown rendering
  • Opt for commonmark.js for broader web applications or when strict CommonMark compliance is necessary
  • Consider towxml for projects needing quick setup with built-in theming and emoji support

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

Towxml

Towxml 是一个可将HTML、Markdown转为微信小程序WXML(WeiXin Markup Language)的渲染库。用于解决在微信小程序中Markdown、HTML不能直接渲染的问题。

Towxml 3.0版本发布啦!✨✨✨

较2.x版本,新版体积更小、速度更快⚡️、支持无限级解析,增加诸多新特性。推荐使用。

如果继续要使用旧版本可切换到 2.x分支

官方交流群:182874473(点击加入),进群答案:wiki和issues

特色

Towxml 3.0 完整支持以下功能。当然在构建时可仅保留需要功能以减少体积大小和代码依赖。

  • 支持echarts图表(3.0+)✨
  • 支持LaTex数学公式(3.0+)✨
  • 支持yuml流程图(3.0+)✨
  • 支持按需构建(3.0+)✨
  • 支持代码语法高亮、代码块行号显示
  • 支持emoji表情:wink:
  • 支持上标、下标、下划线、删除线、表格、视频、图片(几乎绝大部分html元素)……
  • 支持typographer字符替换
  • 支持多主题切换
  • 支持Markdown TodoList
  • 支持事件绑定(这样允许自行扩展功能哟,例如:点击页面中的某个元素,更新当前页面内容等...)
  • 极致的中文排版优化
  • 支持前后解析数据

截图

以下截图即demo项目(文件见wiki)编译的效果

Towxml

如何使用?

注意:3.0切勿直接拉取代码使用,请根据自行需要构建得到最终的代码。

使用遇到问题先把 wiki 中的 demo 按步骤完整跑起来。

Towxml3.0文档(beta)

以下文档仅适用于Master分支代码。

FAQ

Towxml2.0文档

以下文档仅适用于2.x分支代码。

打赏

如果用着不错,可以『打赏』支持。因为有你,开源更美好。

微信打赏支付宝打赏
支持开源,微信打赏。支持开源,微信打赏。

应用展示

这些小程序都使用了 towxml, 查看用户提交的案例 。

License

MIT