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`的文档进行更多自定义设置。 |