外观
Markdown 文档解析
约 460 字大约 2 分钟
2025-10-31
该组件基于 markdown-it 实现,用于解析和渲染Markdown格式的文本内容,支持语法高亮、代码复制等功能。
平台差异说明
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| √ | √ | √ | √ |
功能特性
- ✅ 完整Markdown语法支持 - 支持标题、列表、表格、代码块等所有标准语法
- ✅ 代码语法高亮 - 集成highlight.js,支持多种编程语言
- ✅ 代码复制功能 - 支持一键复制代码块内容
- ✅ 自定义样式 - 可自定义渲染后的样式
- ✅ 行号显示 - 代码块可选择是否显示行号
基本使用
通过content属性传入Markdown格式的文本:
<template>
<view>
<u-markdown :content="content"></u-markdown>
</view>
</template>
<script>
export default {
data() {
return {
content: `
# 一级标题
这是一段普通文本,支持 **粗体** 和 *斜体* 文本。
## 二级标题
- 列表项1
- 列表项2
- 列表项3
\`\`\`javascript
function hello() {
console.log("Hello World!");
}
\`\`\`
`
}
}
}
</script>代码块配置
通过showLine属性控制代码块是否显示行号:
<template>
<view>
<!-- 显示行号(默认) -->
<u-markdown :content="codeContent" :showLine="true"></u-markdown>
<!-- 不显示行号 -->
<u-markdown :content="codeContent" :showLine="false"></u-markdown>
</view>
</template>
<script>
export default {
data() {
return {
codeContent: `
### JavaScript 示例
\`\`\`javascript
// 这是一个简单的函数
function calculateSum(a, b) {
return a + b;
}
const result = calculateSum(10, 20);
console.log('结果:', result);
\`\`\`
### Python 示例
\`\`\`python
def hello_world():
print("Hello, World!")
return "欢迎使用 uView Next!"
hello_world()
\`\`\`
`
}
}
}
</script>此页面源代码地址
API
Props
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| content | 要渲染的Markdown内容 | String | '' |
| showLine | 代码块是否显示行号 | Boolean | true |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| itemclick | 点击富文本内容时触发,微信小程序不支持 | event |
