65 lines
1.4 KiB
Markdown
65 lines
1.4 KiB
Markdown
|
# Markdown渲染组件
|
|||
|
|
|
|||
|
|
这是一个基于`mp-html`和`marked`的Markdown渲染组件，适用于uni-app项目。
|
|||
|
|
|
|||
|
|
## 功能特点
|
|||
|
|
|
|||
|
|
- 支持大部分Markdown语法
|
|||
|
|
- 支持代码高亮
|
|||
|
|
- 支持表格、列表等复杂元素
|
|||
|
|
- 支持图片懒加载
|
|||
|
|
- 支持表格横向滚动
|
|||
|
|
- 支持文本选择复制
|
|||
|
|
|
|||
|
|
## 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 安装mp-html组件
|
|||
|
|
npm install mp-html
|
|||
|
|
|
|||
|
|
# 安装marked和highlight.js用于Markdown解析和代码高亮
|
|||
|
|
npm install marked highlight.js
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用方法
|
|||
|
|
|
|||
|
|
### 1. 引入组件
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<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`的文档进行更多自定义设置。
|