更新记录

2.1.0(2025-05-23) 下载此版本

新增latex公式支持

代码块高亮支持增加除js外的语法

注意:包体积增加了,建议在分包内使用

2.0.5(2024-04-24) 下载此版本

流式输出代码块解决方案

2.0.4(2023-12-06) 下载此版本

长按复制代码改为点击代码块复制

查看更多

平台兼容性

uni-app

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- - - - -
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 快应用-华为 快应用-联盟
- - - - - - - - - -

其他

多语言 暗黑模式 宽屏模式
× ×

zero-markdown-view

一. 重要更新说明

v2.1.0

  • 新增latex公式支持
  • 代码块高亮支持: languages=markup+css+clike+javascript+c+cpp+go+java+markup-templating+php+python+rust
  • 代码包体积增加了不少(注意)

v2.0.4 (仅需要基础功能可以使用此版本)

  • 新增点击代码块复制代码-仅小程序可用

v2.0.0

  • 省去了 npm install marked
  • 省去了 npm install highlight.js
  • 使用 mp-html 自带的插件,重新生成 uniapp 包,大幅减少插件体积 传送门: 优化思路及详细过程 https://juejin.cn/post/7160995270476431373/

二. 使用方法

建议放到分包里手动引入该插件

符合easycom组件模式, 导入 uni_modules 后直接使用即可

复制代码<template>
  <view class="container">
    <!-- 默认用法 直接传入md文本即可-->
    <zero-markdown-view :markdown="content"></zero-markdown-view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        content:'## md格式的文本内容'

      };
    },
    created() {},
    methods: {},
  };
</script>
<style lang="scss" scoped></style>

三. 参数说明

参数 类型 默认值 描述
markdown String markdown 文本
themeColor String '#007AFF' 主题色
codeBgColor String '#2d2d2d' 代码块背景色

四. 注意事项

关于代码块高亮

如果需要更多语言或更换主题请前往 prism官网 下载对应的 prism.min.js 和 prism.css 并替换 plugins/highlight/ 目录下的文件,重新运行打包命令并替换mp-html. 不建议这样做,因为本插件还修改过其他地方,可能会导致插件不能正常使用. 具体请参考mp-html的文档,在文末有链接

关于代码块流式输出闪烁,可以尝试 给代码块后增加 \n

复制代码        computed: {
            // 流式输出时代码块处理 , 这时候请使用 msgContent 传入组件中
            msgContent() {
                if (!this.content) {
                    return
                }
                let htmlString = ''
                // 判断markdown中代码块标识符的数量是否为偶数
                if (this.content.split("```").length % 2) {
                    let content = this.content
                    if (content[content.length - 1] != '\n') {
                        content += '\n'
                    }
                    htmlString = content
                } else {
                    htmlString = this.content
                }
                return htmlString
            }
        },

如何关闭点击代码块复制功能?

找到组件文件夹 zero-markdown-view-mp-html-highlight-config.js

copyByClickCode 改成 false 即可

复制代码export default {
  copyByClickCode: true, // 点击代码块复制
  showLanguageName: true, // 是否在代码块右上角显示语言的名称
}

感谢 mp-html 插件

插件地址: https://ext.dcloud.net.cn/plugin?id=805

文档地址: https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart

插件预览: code

小程序搜索: 零技术

预览的小程序不一定能及时更新当前插件

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议
lha***@163.com

2025-05-31

能否增加mermaid渲染

zerojs 2025-06-03

本插件依赖的mp-html好像不支持mermaid

zhangjihao

2025-05-25

万事如一

2025-05-09

鸿蒙NEXT 系统不支持,使用这个markdown 插件,鸿蒙系统启动uniapp 白屏。

xf1***@163.com

2025-05-08

我解析出来的表格不会单元格宽度不撑满怎么解决啊

270***@qq.com

2025-05-06

弱弱问下,只有js代码才能高亮???我换其他代码都是纯白色

284***@qq.com

2025-04-12

不支持Mermaid的图表,如果支持Mermaid图表就更好了

185***@qq.com

2025-03-27

894***@qq.com

2025-03-24

为什么小程序 不能实时逐字打印响应的文本内容,需要响应的文本加载完,才开始逐字打印,H5就可以

shj***@gmail.com

2025-03-21

非常好用,想问一下,如何监听内容中的超链接点击事件,比如:test ,希望能监听到[test]被点击的事件

shj***@gmail.com 2025-03-21

看了一下源码,使用了mp-html插件,mp-html支持linktap,因此只需要在zero-markdown-view.vue中给mp-html补上linktap事件@linktap="linktap",然后在methods中增加linktap(e){this.$emit('linktap',e);}既可以

fly***@sina.com

2025-03-18

skyline下渲染有点问题

2025-05-26

似乎还有个bug。 <zero-markdown-view :markdown="message"></zero-markdown-view> const message = ref("# Test"); 如...

2024-11-08

微信小程序平台上使用 zero-markdown-view,在流式输出时,touchmove 和 touchend 的事件触发不稳定 ``` @touchstart="onTouc...

2023-02-13

这个代码块的代码字体颜色咋都是白色的呀,而不是不同颜色的