更新记录

1.0.1（2025-08-20） 下载此版本

1、音频渲染样式调整 2、小程序代码复制功能适配 3、音频、视频渲染方式说明

1.0.0（2025-08-13） 下载此版本

首次提交

平台兼容性

uni-app(4.65)

uni-app x(4.65)

markdown-extension

一. 使用方法

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

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

<template>
  <view class="container">
    <!-- 默认用法 直接传入md文本即可 普通md展示-->
    <markdown-extension :markdown="content"></markdown-extension>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        content: "## md格式的文本内容",
      };
    },
    created() {},
    methods: {},
  };
</script>
<style lang="scss" scoped></style>

二. 样式修改

markdown-extension.vue 中 initTagStyle() 方法下对各标签样式修改

三. 参数说明

四. 注意事项

关于音频、视频显示渲染

需要将markdown 内容中的音频、视频链接替换成音频、视频标签样式显示

const reg1 = /\b(https?:\/\/[^\s"']+?\.(?:mp4|avi|mkv|mov|webm|flv|wmv))(?:[?#]\S*)?\b/gi;
const reg2 = /\b(https?:\/\/[^\s"']+?\.(?:mp3|amr|flac|m4a|mpeg4|ogg|opus|aac|wav|wma))(?:[?#]\S*)?\b/gi;

const value = value.replace(reg1, ($1) => {
      return `<video width="100%" src="${$1}"></video>`
    }).replace(reg2, ($1) => {
      return `<audio width="100%" src="${$1}"></audio>`
    })

关于代码块高亮

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

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