很多项目中需要文档类型的输出，使用html或者wxml来输出显得很不方便，markdown的文档输出方式是开发人员的首选，由于微信小程序不能直接渲染HTML，因此富文本编辑器生成的HTML内容无法直接在小程序中展示。

queryUI内置支持markdown文档解析(支持table)，html解析

ui-markit是queryUI文档的解析组件，如何在你的项目中使用呢，可以参考 https://gitee.com/webkixi/aotoo-xquery 的项目介绍

解析示例

小米官网的UI设计我挺喜欢的，随便找一个抄一下

仿小米html源码

组件解析html结构并生成小程序结构

<div class="card-container">
  <div class="for-img">
    <img class="card-img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2c16238f786e4f93bdb175d7bf21aa47.jpg" />
  </div>
  <h3 class="for-title" style="border: 1px solid red;">
    Redmi K30
  </h3>
  <p class="for-desc">
    120Hz流速屏，全速热爱
  </p>
  <p class="for-price">
    1599元起
  </p>
</div>

css
stylus样式，需要编译生成wxss样式文件

.card-it
  width 100%
  margin 0 auto
  background-color #f5f5f5
  padding: 20px 0

.card-container
  position: relative;
  z-index: 1;
  width: 234px;
  height: 260px;
  margin 0 auto
  // margin-left: 14px;
  margin-bottom: 14px;
  background: #fff;
  padding: 20px 0;
  transition: all .2s linear;
  .for-img
    width: 160px;
    height: 160px;
    margin: 0 auto 18px;
    .card-img
      width: 160px;
      height: 160px;
      image
        width 160px
        height 160px
  .for-title
    display: block;
    font-size: 16px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 10px 2px;
  .for-desc
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 10px 10px;
    height: 18px;
    font-size: 12px;
    color: #b0b0b0;
  .for-price
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: center;
    color: #ff6700;
    margin: 0 10px 14px;

文档说明内容

## xquery富文本组件使用 
富文本组件是xquery的内置组件，通过下面几个步骤安装使用
...

wxml

<ui-markit dataSource="{{htmlConfig}}" textType="html" />
<ui-markit dataSource="{{mdConfig}}" textType="md" />

js

const Pager = require('components/aotoo/core/index')
Pager({
  data: {
    htmlConfig: {
      listClass: 'html-class',  // 容器样式类
      content: `<div ...`
    },
    
    mdConfig: {
      listClass: 'md-class',  // 容器样式类
      content: `markdown 内容部分`
    }
  }
})

github地址：https://github.com/webkixi/aotoo-xquery

小程序demo演示