<meta property="og:image" content="https://avatars0.githubusercontent.com/u/5469785?s=400&v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="sbfkcel/towxml" /><meta property="og:url" content="https://github.com/sbfkcel/towxml" /><meta property="og:description" content="towxml - HTML、Markdown转微信小程序WXML(WeiXin Markup Language)渲染库" />
<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="hostname" content="github.com">
<meta name="user-login" content="">
<meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload" content="ODNjNDMwOGVjYTcwMmY1OWEyNjgyOTdhMDlmYTVhMDBhMGE0NjU0YTAxM2RkYjQyZjNhZWQ0NGNlNmMyZjUzZXx7InJlbW90ZV9hZGRyZXNzIjoiMTA0LjE1NS4yMjMuMTY3IiwicmVxdWVzdF9pZCI6IkU3NDQ6NzFBNToyMUMyRDU5OjQxNjcxODc6NUFFRUIwRjQiLCJ0aW1lc3RhbXAiOjE1MjU1OTIzMDksImhvc3QiOiJnaXRodWIuY29tIn0=">
<meta name="enabled-features" content="UNIVERSE_BANNER,FREE_TRIALS,MARKETPLACE_INSIGHTS,MARKETPLACE_SELF_SERVE,MARKETPLACE_FREE_APPS,MARKETPLACE_INSIGHTS_CONVERSION_PERCENTAGES">
<link href="https://github.com/sbfkcel/towxml/commits/master.atom" rel="alternate" title="Recent Commits to towxml:master" type="application/atom+xml">
<link rel="canonical" href="https://github.com/sbfkcel/towxml/blob/master/docs/demo.md" data-pjax-transient>
<div class="unsupported-browser">
<h5>Please note that GitHub no longer supports old versions of Internet Explorer.</h5>
<p>We recommend upgrading to the latest <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>, <a href="https://chrome.google.com">Google Chrome</a>, or <a href="https://mozilla.org/firefox/">Firefox</a>.</p>
<header class="Header header-logged-out position-relative f4 py-3" role="banner">
</div>
<div class="HeaderMenu HeaderMenu--bright d-flex flex-justify-between flex-auto">
<nav class="mt-0">
<ul class="d-flex list-style-none">
<li class="ml-2">
<a class="js-selected-navigation-item HeaderNavlink px-0 py-2 m-0" data-ga-click="Header, click, Nav menu - item:features" data-selected-links="/features /features/project-management /features/code-review /features/project-management /features/integrations /features" href="/features">
Features
<li class="ml-4">
<a class="js-selected-navigation-item HeaderNavlink px-0 py-2 m-0" data-ga-click="Header, click, Nav menu - item:explore" data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore" href="/explore">
Explore
<li class="ml-4">
<a class="js-selected-navigation-item HeaderNavlink px-0 py-2 m-0" data-ga-click="Header, click, Nav menu - item:marketplace" data-selected-links=" /marketplace" href="/marketplace">
Marketplace
<div class="d-flex">
<div class="d-lg-flex flex-items-center mr-3">
<div class="header-search scoped-search site-scoped-search js-site-search" role="search">
<label class="form-control header-search-wrapper js-chromeless-input-container">
<a class="header-search-scope no-underline" href="/sbfkcel/towxml/blob/master/docs/demo.md">This repository</a>
<input type="text"
class="form-control header-search-input js-site-search-focus js-site-search-field is-clearable"
data-hotkey="s,/"
name="q"
value=""
placeholder="Search"
aria-label="Search this repository"
data-unscoped-placeholder="Search GitHub"
data-scoped-placeholder="Search"
autocapitalize="off"
>
<input type="hidden" class="js-site-search-type-field" name="type" >
</label>
</div>
<span class="d-inline-block">
<div class="HeaderNavlink px-0 py-2 m-0">
<a class="text-bold text-white no-underline" href="/login?return_to=%2Fsbfkcel%2Ftowxml%2Fblob%2Fmaster%2Fdocs%2Fdemo.md" data-ga-click="(Logged out) Header, clicked Sign in, text:sign-in">Sign in</a>
<span class="text-gray">or</span>
<a class="text-bold text-white no-underline" href="/join?source=header-repo" data-ga-click="(Logged out) Header, clicked Sign up, text:sign-up">Sign up</a>
</div>
</span>
</div>
</div>
<div id="js-flash-container">
<ul class="pagehead-actions">
<a class="social-count js-social-count" href="/sbfkcel/towxml/stargazers"
aria-label="159 users starred this repository">
159
</a>
<a href="/sbfkcel/towxml/network" class="social-count"
aria-label="33 users forked this repository">
33
</a>
<h1 class="public ">
</div>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /sbfkcel/towxml/issues" href="/sbfkcel/towxml/issues">
<svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"/></svg>
<span itemprop="name">Issues</span>
<span class="Counter">1</span>
<meta itemprop="position" content="2">
Pull requests 0
<a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /sbfkcel/towxml/projects" href="/sbfkcel/towxml/projects">
<svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h13a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1z"/></svg>
Projects
<span class="Counter" >0</span>
type="button" aria-label="Switch branches or tags" aria-expanded="false" aria-haspopup="true">
<i>Branch:</i>
<span class="js-select-button css-truncate-target">master</span>
<div class="select-menu-modal">
<div class="select-menu-header">
<svg class="octicon octicon-x js-menu-close" role="img" aria-label="Close" viewBox="0 0 12 16" version="1.1" width="12" height="16"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48z"/></svg>
<span class="select-menu-title">Switch branches/tags</span>
</div>
<div class="select-menu-filters">
<div class="select-menu-text-filter">
<input type="text" aria-label="Filter branches/tags" id="context-commitish-filter-field" class="form-control js-filterable-field js-navigation-enable" placeholder="Filter branches/tags">
</div>
<div class="select-menu-tabs">
<ul>
<li class="select-menu-tab">
<a href="#" data-tab-filter="branches" data-filter-placeholder="Filter branches/tags" class="js-select-menu-tab" role="tab">Branches</a>
</li>
<li class="select-menu-tab">
<a href="#" data-tab-filter="tags" data-filter-placeholder="Find a tag…" class="js-select-menu-tab" role="tab">Tags</a>
</li>
</ul>
</div>
</div>
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="branches" role="menu">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
<a class="select-menu-item js-navigation-item js-navigation-open selected"
href="/sbfkcel/towxml/blob/master/docs/demo.md"
data-name="master"
data-skip-pjax="true"
rel="nofollow">
<svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5z"/></svg>
<span class="select-menu-item-text css-truncate-target js-select-menu-filter-text">
master
</span>
</a>
</div>
<div class="select-menu-no-results">Nothing to show</div>
</div>
<div class="select-menu-list select-menu-tab-bucket js-select-menu-tab-bucket" data-tab-filter="tags">
<div data-filterable-for="context-commitish-filter-field" data-filterable-type="substring">
</div>
<div class="select-menu-no-results">Nothing to show</div>
</div>
</div>
<div class="BtnGroup float-right">
<a href="/sbfkcel/towxml/find/master"
class="js-pjax-capture-input btn btn-sm BtnGroup-item"
data-pjax
data-hotkey="t">
Find file
</a>
<clipboard-copy for="blob-path" class="btn btn-sm BtnGroup-item">
Copy path
</clipboard-copy>
</div>
<div id="blob-path" class="breadcrumb">
<span class="repo-root js-repo-root"><span class="js-path-segment"><a data-pjax="true" href="/sbfkcel/towxml"><span>towxml</span></a></span></span><span class="separator">/</span><span class="js-path-segment"><a data-pjax="true" href="/sbfkcel/towxml/tree/master/docs"><span>docs</span></a></span><span class="separator">/</span><strong class="final-path">demo.md</strong>
</div>
<div class="commit-tease-contributors">
<img alt="" class="loader-loading float-left" src="https://assets-cdn.github.com/images/spinners/octocat-spinner-32-EAF2F5.gif" width="16" height="16" />
<span class="loader-error">Cannot retrieve contributors at this time</span>
</div>
<div class="BtnGroup">
<a id="raw-url" class="btn btn-sm BtnGroup-item" href="/sbfkcel/towxml/raw/master/docs/demo.md">Raw</a>
<a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/sbfkcel/towxml/blame/master/docs/demo.md">Blame</a>
<a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/sbfkcel/towxml/commits/master/docs/demo.md">History</a>
</div>
<a class="btn-octicon tooltipped tooltipped-nw"
href="https://desktop.github.com"
aria-label="Open this file in GitHub Desktop"
data-ga-click="Repository, open with desktop, type:windows">
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"/></svg>
</a>
<button type="button" class="btn-octicon disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/></svg>
</button>
<button type="button" class="btn-octicon btn-octicon-danger disabled tooltipped tooltipped-nw"
aria-label="You must be signed in to make or propose changes">
<svg class="octicon octicon-trashcan" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/></svg>
</button>
由于微信小程序==不允许直接渲染==HTML
,因此富文本编辑器生成的HTML
内容无法直接在小程序中展示。
Towxml 正是为了解决这一切,Towxml是一个可将HTML
、markdown
转换为WXML
(WeiXin Markup Language)的渲染库。
- 支持代码语法高亮
- 支持emoji表情😉
- 支持上标、下标、下划线、删除线……
- 支持typographer字符替换
- 多主题动态支持
- 极致的中文排版优化
- 前后端支持
Markdown 是一种方便记忆、书写的纯文本标记语言,用户可以使用这些标记符号以最小的输入代价生成极富表现力的文档:譬如您正在阅读的这份文档。它使用简单的符号标记不同的标题,分割不同的段落,粗体 或者 斜体 某些文字。
当然,不仅仅只是这些……
边城沈从文
著——中篇小说
在川湘交界的茶峒附近,小溪白塔旁边,住着主人公翠翠和她爷爷老船夫。茶峒城里有个船总叫顺顺,他有两个儿子,老大叫天保,老二叫傩送。
端午节翠翠去看龙舟赛,偶然相遇相貌英俊的青年水手傩(nuó)送,傩送在翠翠的心里留下了深刻的印象。同时,傩送的兄长天保也喜欢上了翠翠,并提前托媒人提了亲。天保告诉傩送一年前他就爱上了翠翠,而傩送告诉天保他两年前就爱上了翠翠,天保听了后也吃了一惊。然而此时,当地的团总以新磨坊为陪嫁,想把女儿许配给傩送。而傩送宁肯继承一条破船也要与翠翠成婚。
兄弟俩没有按照当地风俗以决斗论胜负,而是采用公平而浪漫的唱山歌的方式表达感情,让翠翠自己从中选择。傩送是唱歌好手,天保自知唱不过弟弟,心灰意冷,断然驾船远行做生意。
碧溪边只听过一夜傩送的歌声,后来,歌却再没有响起来。老船夫忍不住去问,本以为是老大唱的,却得知:唱歌人是傩送,老大讲出实情后便去做生意。几天后老船夫听说老大坐水船出了事,淹死了……
码头的船总顺顺因为儿子天保的死对老船夫变得冷淡。船总顺顺不愿意翠翠再做傩送的媳妇。老船夫只好郁闷地回到家,翠翠问他,他也没说起什么。夜里下了大雨,夹杂着吓人的雷声。第二天翠翠起来发现船已被冲走,屋后的白塔也冲塌了,翠翠去找爷爷却发现老人已在雷声将息时死去了…… 老军人杨马兵热心地前来陪伴翠翠,也以渡船为生,等待着傩送的归来。
python
@requires_authorization def somefunc(param1='', param2=0): '''A docstring''' if param1 > param2: # interesting print 'Greater' return (param2 - param1 + 1) or None class SomeClass: pass >>> message = '''interpreter ... prompt'''
xml
<?xml version="1.0"?> <!DOCTYPE mycat:schema SYSTEM "schema.dtd"> <mycat:schema xmlns:mycat="http://io.mycat/"> <schema name="doubaSchema" checkSQLschema="false" sqlMaxLimit="100" dataNode="dn1"></schema><<span class="pl-ent">dataNode</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>dn1<span class="pl-pds">"</span></span> <span class="pl-e">dataHost</span>=<span class="pl-s"><span class="pl-pds">"</span>dh1<span class="pl-pds">"</span></span> <span class="pl-e">database</span>=<span class="pl-s"><span class="pl-pds">"</span>douba<span class="pl-pds">"</span></span> /> <<span class="pl-ent">dataHost</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>dh1<span class="pl-pds">"</span></span> <span class="pl-e">maxCon</span>=<span class="pl-s"><span class="pl-pds">"</span>500<span class="pl-pds">"</span></span> <span class="pl-e">minCon</span>=<span class="pl-s"><span class="pl-pds">"</span>20<span class="pl-pds">"</span></span> <span class="pl-e">balance</span>=<span class="pl-s"><span class="pl-pds">"</span>1<span class="pl-pds">"</span></span> <span class="pl-e">writeType</span>=<span class="pl-s"><span class="pl-pds">"</span>0<span class="pl-pds">"</span></span> <span class="pl-e">dbType</span>=<span class="pl-s"><span class="pl-pds">"</span>mysql<span class="pl-pds">"</span></span> <span class="pl-e">dbDriver</span>=<span class="pl-s"><span class="pl-pds">"</span>native<span class="pl-pds">"</span></span> <span class="pl-e">switchType</span>=<span class="pl-s"><span class="pl-pds">"</span>2<span class="pl-pds">"</span></span> <span class="pl-e">slaveThreshold</span>=<span class="pl-s"><span class="pl-pds">"</span>100<span class="pl-pds">"</span></span>> <<span class="pl-ent">heartbeat</span>>show slave status</<span class="pl-ent">heartbeat</span>> <<span class="pl-ent">writeHost</span> <span class="pl-e">host</span>=<span class="pl-s"><span class="pl-pds">"</span>hostM41<span class="pl-pds">"</span></span> <span class="pl-e">url</span>=<span class="pl-s"><span class="pl-pds">"</span>192.168.2.41:3306<span class="pl-pds">"</span></span> <span class="pl-e">user</span>=<span class="pl-s"><span class="pl-pds">"</span>root<span class="pl-pds">"</span></span> <span class="pl-e">password</span>=<span class="pl-s"><span class="pl-pds">"</span>123456<span class="pl-pds">"</span></span> > <<span class="pl-ent">readHost</span> <span class="pl-e">host</span>=<span class="pl-s"><span class="pl-pds">"</span>hostS42<span class="pl-pds">"</span></span> <span class="pl-e">url</span>=<span class="pl-s"><span class="pl-pds">"</span>192.168.2.42:3306<span class="pl-pds">"</span></span> <span class="pl-e">user</span>=<span class="pl-s"><span class="pl-pds">"</span>root<span class="pl-pds">"</span></span> <span class="pl-e">password</span>=<span class="pl-s"><span class="pl-pds">"</span>123456<span class="pl-pds">"</span></span> /> <<span class="pl-ent">readHost</span> <span class="pl-e">host</span>=<span class="pl-s"><span class="pl-pds">"</span>hostS43<span class="pl-pds">"</span></span> <span class="pl-e">url</span>=<span class="pl-s"><span class="pl-pds">"</span>192.168.2.43:3306<span class="pl-pds">"</span></span> <span class="pl-e">user</span>=<span class="pl-s"><span class="pl-pds">"</span>root<span class="pl-pds">"</span></span> <span class="pl-e">password</span>=<span class="pl-s"><span class="pl-pds">"</span>123456<span class="pl-pds">"</span></span> /> </<span class="pl-ent">writeHost</span>> </<span class="pl-ent">dataHost</span>>
</mycat:schema>
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> content text... </body> </html>
css
html,body {background:white;} .box {width:200px; height:200px;}
javascript
(()=>{ const fs = require('fs');<span class="pl-k">let</span> <span class="pl-en">sum</span> <span class="pl-k">=</span> (<span class="pl-smi">a</span>,<span class="pl-smi">b</span>)<span class="pl-k">=></span>{ <span class="pl-k">return</span> a<span class="pl-k">+</span>b; }; <span class="pl-en">console</span>.<span class="pl-c1">log</span>(<span class="pl-en">sum</span>(<span class="pl-c1">1</span><span class="pl-k">+</span><span class="pl-c1">2</span>));
})()
Classic markup: 😉 :crush: 😢 :tear: 😆 😋
Shortcuts (emoticons): :-) :-( 8-) ;)
Item | Value | Qty |
---|---|---|
Computer | 1600 USD | 5 |
Phone | 12 USD | 12 |
Pipe | 1 USD | 234 |
Enable typographer option to see result. (c) (C) (r) (R) (tm) (TM) (p) (P) +- test.. test... test..... test?..... test!.... !!!!!! ???? ,, -- --- "Smartypants, double quotes" and 'single quotes'
This is bold text
This is bold text
This is italic text
This is italic text
Strikethrough
Blockquotes can also be nested...
...by using additional greater-than signs right next to each other...
...or with spaces between arrows.
Unordered
- Create a list by starting a line with
+
,-
, or*
- Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
- Ac tristique libero volutpat at
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Marker character change forces new list start:
- Very easy!
Ordered
-
Lorem ipsum dolor sit amet
-
Consectetur adipiscing elit
-
Integer molestie lorem at massa
-
You can use sequential numbers...
-
...or keep all the numbers as
1.
Start numbering with offset:
- foo
- bar
https://github.com/sbfkcel/towxml https://www.npmjs.com/package/towxml
- 19^th^
- H
2O
++Inserted text++
==Marked text==
视频
由Towxml
生成
Jump to Line
</div>
<a aria-label="Homepage" title="GitHub" class="footer-octicon" href="https://github.com">
<svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
<script crossorigin="anonymous" integrity="sha512-2GVr5rsbbfKbHM6oRrri41+qJ2ltJBCqluASS29fj+9yHGLFmFhq0C64VMdL57UJ34G2+FXU+8FZhaAOnsCEhw==" type="application/javascript" src="https://assets-cdn.github.com/assets/compat-bb7abfb15ed4ffb0da9056d4c980fba5.js"></script>
<script crossorigin="anonymous" integrity="sha512-EST2K47MuXo8oWVqCyU58ZnnvZTPcd7fM//26jWjgrjqTGi2yJp6mZNYuwYk+K6d2r9bt7qT4uYCz2VMXS0j/Q==" type="application/javascript" src="https://assets-cdn.github.com/assets/frameworks-27d1acefde8235024615b1326306ab81.js"></script>
<script crossorigin="anonymous" async="async" integrity="sha512-PJQJ4tcJGzNdweWUf1gj8G3Qka9PD/rMqrsj6doQfz2T+kNCXpOD3HKoPilGBbkizc28sx+zEytm4qLgIWSxdw==" type="application/javascript" src="https://assets-cdn.github.com/assets/github-8a2aee799e9b858e966f314cf55893dc.js"></script>