在开发过程中，对于内容的展示通常有富文本和Markdown两种，后者更偏向于技术文档、说明书一类的内容展示。但是和富文本不同的是，没有一个原生组件可以用来解析展示Markdown语法的内容，所以……只好自己写了一个

Markdown渲染器使用说明

简介

这是一个为ArkUI(HarmonyOS)开发的Markdown渲染器三方库插件。它不仅能解析标准的Markdown语法，更重要的是能够在ArkUI中进行真正的可视化渲染显示，提供丰富的视觉效果和交互体验。

功能特性

支持的Markdown语法渲染

• ✅ 标题渲染 (# ## ### #### ##### ######) - 不同级别不同字体大小
• ✅ 粗体渲染 (文本) - 加粗字体效果
• ✅ 斜体渲染 (文本) - 斜体字体效果
• ✅ 行内代码渲染 (代码) - 红色文字，灰色背景
• ✅ 代码块渲染 (语言\n代码\n) - 专业代码展示，带语言标识
• ✅ 链接渲染 (文本) - 蓝色下划线，可点击交互
• ✅ 图片渲染 ( 真实图片显示，带标题和URL信息
• ✅ 无序列表渲染 (- 项目) - 带项目符号的缩进布局
• ✅ 有序列表渲染 (1. 项目) - 数字序号的列表布局
• ✅ 引用渲染 (> 引用文本) - 左侧蓝色竖线，斜体效果
• ✅ 表格渲染 (| 表头 | 表头 |) - 完整表格，带边框和交替行色

使用方法

安装

1. 导入渲染器

import { MarkdownRenderer } from 'markdown_hm'

2. 基本使用（推荐）

// 直接使用MarkdownRenderer组件进行渲染
@Entry
@Component
struct MyPage {
  @State markdownContent: string = `
# 标题示例
这是一段包含**粗体**和*斜体*的文本。

## 代码示例
\`\`\`javascript
function hello() {
  console.log("Hello World!");
}
\`\`\`

## 表格示例
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |

> 这是一段引用文本
`;

  build() {
    Scroll() {
      MarkdownRenderer({ markdownContent: this.markdownContent })
        .width('100%')
        .padding(16)
    }
  }
}

API 参考

MarkdownRenderer 组件

主要的markdown渲染组件，用于可视化显示markdown内容。

属性:

• markdownContent: string - 要渲染的Markdown文本内容

使用示例:

MarkdownRenderer({ markdownContent: this.markdownText })

MarkdownParser.parse(markdown: string): MarkdownItem[]

将Markdown文本解析为结构化的渲染项数组。

参数:

• markdown: 要解析的Markdown文本

渲染效果示例

输入Markdown:

# 一级标题
## 二级标题

这是一段包含**粗体**、*斜体*和`行内代码`的文本。

### 代码块示例
\```typescript
interface User {
  name: string;
  age: number;
}
\```

### 列表示例
- 无序列表项1
- 无序列表项2

1. 有序列表项1
2. 有序列表项2

### 表格示例
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |

### 其他元素
> 这是一段引用文本，用于强调重要内容。

![示例图片](xxx图片地址)

[这是一个链接](xxx连接地址)

渲染效果:

• 标题: 不同级别显示不同字体大小，粗体效果
• 文本格式: 粗体显示加粗，斜体显示倾斜，行内代码红色背景
• 代码块: 灰色背景容器，等宽字体，显示语言标识
• 列表: 无序列表显示项目符号，有序列表显示数字
• 表格: 完整边框，表头灰色背景，数据行交替颜色
• 引用: 左侧蓝色竖线，斜体文字，浅灰背景
• 图片: 实际图片显示，带标题和URL信息
• 链接: 蓝色文字，下划线，可点击交互

特色功能

1. 真正的可视化渲染

• 不是简单的文本转换，而是真正的ArkUI视觉渲染
• 每种markdown元素都有对应的视觉样式和交互效果
• 提供类似富文本编辑器的显示效果

2. 完整的表格支持

• 支持复杂的多行多列表格
• 专业的表格样式：边框、交替行色、表头突出
• 响应式布局，自动适应屏幕宽度

3. 图片真实显示

• 直接加载并显示网络图片
• 图片加载失败时显示友好的占位符
• 支持图片标题和URL信息展示

4. 交互功能

• 链接可点击（可扩展处理逻辑）
• 代码块支持语言标识
• 良好的用户体验设计

技术特点

1. 纯ArkUI实现: 完全使用ArkUI组件，不依赖HTML或WebView
2. 组件化设计: 易于集成和自定义扩展
3. 类型安全: 完整的TypeScript类型定义
4. 性能优化: 高效的解析算法和渲染逻辑
5. 样式统一: 专业的UI设计，与ArkUI风格一致

注意事项

1. 该渲染器专为ArkUI环境设计，无需浏览器DOM API
2. 直接在build()方法中使用MarkdownRenderer组件即可
3. 图片URL需要确保在应用中可访问（支持网络图片）
4. 表格会自动处理列宽，建议控制表格内容长度以获得最佳显示效果
5. 链接点击事件可以根据需要进行自定义处理

版本信息

• 版本: 2.0.0
• 兼容性: HarmonyOS 5.0+
• 语言: ArkTS/ETS
• 特性: 完整视觉渲染 + 表格支持 + 图片显示