Markdown 文档解析 | uView Next - 全面兼容 nvue 的 uni-app 生态框架

# Markdown 文档解析

该组件基于 markdown-it (opens new window) 实现，用于解析和渲染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>
✅ Copy success!

# 代码块配置

通过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>
✅ Copy success!

# 此页面源代码地址

页面源码地址

gitee

# API

# Props

属性名	说明	类型	默认值	可选值	平台差异说明
content	要渲染的Markdown内容	String	''	-	-
showLine	代码块是否显示行号	Boolean	true	false	-

# Events

事件名	说明	回调参数
itemclick	点击富文本内容时触发，微信小程序不支持	event

← Popover 气泡提示 Qrcode 二维码 →