该组件基于 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>

此页面源代码地址

页面源码地址

 gitee

API

Props

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

Events

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