YingXingAI/components/markdown-viewer

Markdown渲染组件

这是一个基于mp-html和marked的Markdown渲染组件，适用于uni-app项目。

功能特点

• 支持大部分Markdown语法
• 支持代码高亮
• 支持表格、列表等复杂元素
• 支持图片懒加载
• 支持表格横向滚动
• 支持文本选择复制

安装依赖

# 安装mp-html组件
npm install mp-html

# 安装marked和highlight.js用于Markdown解析和代码高亮
npm install marked highlight.js

使用方法

1. 引入组件

<template>
  <view>
    <markdown-viewer :content="markdownContent" />
  </view>
</template>

<script>
import MarkdownViewer from '@/components/markdown-viewer/markdown-viewer';

export default {
  components: {
    MarkdownViewer
  },
  data() {
    return {
      markdownContent: '# 标题\n\n这是一段Markdown文本'
    };
  }
};
</script>

2. 组件属性

属性名	类型	默认值	说明
content	String	''	Markdown文本内容
domain	String	''	主域名（用于链接拼接）

注意事项

1. 确保项目中已正确安装并配置mp-html、marked和highlight.js
2. 如需自定义样式，可以修改组件内的样式或通过外部样式覆盖

高级配置

如需更多高级配置，可以直接修改组件内的marked.setOptions配置项，或者参考mp-html的文档进行更多自定义设置。