Zero Markdown 渲染器

组件名：zero-markdown

基于 mp-html 的 uni-app Markdown 渲染组件。支持 Markdown、代码高亮、LaTeX、表格、文本选择和完整标签样式配置。

安装

从插件市场导入后保留 uni_modules/zero-markdown。也可以使用 npm：

npm install uni-zero-markdown

组件已经内置带 Markdown、代码高亮、LaTex 与 style 扩展的 mp-html 渲染器，不需要额外安装或配置 mp-html。这样可保证 npm、插件市场和旧本地组件的 Markdown 解析结果一致。

使用示例

<template>
  <zero-markdown
    :markdown="content"
    theme-color="#1fb38b"
    text-color="#fff"
    list-style="margin:0;color:#fff;"
    list-item-style="margin:8rpx 0;color:#fff;"
    :scroll-table="true"
    @linktap="handleLinkTap"
  />
</template>

<script>
import ZeroMarkdown from 'uni-zero-markdown'

export default {
  components: { ZeroMarkdown },
  data() {
    return { content: '# 标题\n\n这是 **Markdown** 内容。' }
  },
  methods: {
    handleLinkTap({ href }) {
      // 可在这里记录或拦截链接点击
      console.log(href)
    }
  }
}
</script>

属性

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | markdown | String | '' | 要渲染的 Markdown 内容 | | selectable | Boolean / String | 'force' | 是否允许长按选择文本 | | scrollTable | Boolean | true | 表格超宽时是否支持横向滚动 | | copyLink | Boolean / String | false | 是否由 mp-html 自动复制外部链接 | | themeColor | String | #007AFF | 标题、强调和分割线主题色 | | codeBgColor | String | #2d2d2d | 代码块背景色 | | textColor | String | '' | 统一覆盖正文、列表、引用、表格、强调和标题文字颜色 | | headingColor | String | '' | 单独设置标题颜色，优先于 textColor | | wrapperStyle | String | '' | 组件最外层 view 的行内样式 | | containerStyle | String | '' | 传给 mp-html 根容器的行内样式 | | paragraphStyle | String | '' | 段落 p 样式；在 aiMode 下也可追加覆盖 | | headingStyle | String | '' | 所有标题的追加样式 | | listStyle / listItemStyle | String | '' | 列表 ul、ol 与列表项 li 的追加样式 | | blockquoteStyle | String | '' | 引用块追加样式 | | tableStyle / tableHeaderStyle / tableCellStyle | String | '' | 表格、表头与单元格追加样式 | | codeStyle | String | '' | 代码块和行内代码追加样式 | | strongStyle / emStyle / linkStyle | String | '' | 加粗、斜体与链接追加样式 | | tagStyle | Object | {} | 任意 mp-html 标签的最终样式覆盖，优先级最高 | | aiMode | Boolean | false | 启用更大的 AI 回答排版规格 | | domain | String | '' | 相对链接、图片的主域名 | | lazyLoad / previewImg / pauseVideo / showImgMenu / setTitle | Boolean / String | 见组件 | 传给 mp-html 的媒体与页面行为配置 | | useAnchor | Boolean / Number | false | 是否启用锚点跳转，可传偏移量 | | openLink | Boolean | true | App 端点击 HTTP/HTTPS 链接时是否自动打开，保持本地旧版行为 |

事件

| 事件 | 参数 | 说明 | | --- | --- | --- | | linktap | mp-html 链接事件对象 | 用户点击链接；由使用方决定是否跳转 | | load | mp-html 加载事件对象 | DOM 结构解析完成 | | ready | mp-html 就绪事件对象 | 图片等媒体加载完成 | | imgtap | mp-html 图片事件对象 | 用户点击图片 | | error | mp-html 错误事件对象 | 媒体加载异常 | | play | mp-html 播放事件对象 | 音视频开始播放 |

平台与发布

支持 Vue 2 的微信小程序、App-Vue、H5；不支持 nvue。渲染能力依赖 mp-html，其具体平台限制以该依赖的版本说明为准。

cd plugins/ZeroMarkdown/uni_modules/zero-markdown
npm login
npm publish