在开发过程中，对于内容的展示通常有富文本和Markdown两种，后者更偏向于技术文档、说明书一类的内容展示。但是和富文本不同的是，没有一个原生组件可以用来解析展示Markdown语法的内容，所以……只好自己写了一个
# Markdown渲染器使用说明
## 简介
这是一个为ArkUI(HarmonyOS)开发的Markdown渲染器三方库插件。它不仅能解析标准的Markdown语法，更重要的是能够在ArkUI中进行**真正的可视化渲染显示**，提供丰富的视觉效果和交互体验。
## 功能特性
### 支持的Markdown语法渲染
- **标题渲染** (# ## ### #### ##### ######) - 不同级别不同字体大小
- **粗体渲染** (**文本**) - 加粗字体效果
- **斜体渲染** (*文本*) - 斜体字体效果
- **行内代码渲染** (`代码`) - 红色文字，灰色背景
- **代码块渲染** (```语言\n代码\n```) - 专业代码展示，带语言标识
- **链接渲染** ([文本](URL)) - 蓝色下划线，可点击交互
- **图片渲染** ( 真实图片显示，带标题和URL信息
- **无序列表渲染** (- 项目) - 带项目符号的缩进布局
- **有序列表渲染** (1. 项目) - 数字序号的列表布局
- **引用渲染** (> 引用文本) - 左侧蓝色竖线，斜体效果
- **表格渲染** (| 表头 | 表头 |) - 完整表格，带边框和交替行色
## 使用方法
### 安装
### 1. 导入渲染器
```typescript
import { MarkdownRenderer } from 'markdown_hm'
```
### 2. 基本使用（推荐）
```typescript
// 直接使用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文本内容
**使用示例:**
```typescript
MarkdownRenderer({ markdownContent: this.markdownText })
```
### MarkdownParser.parse(markdown: string): MarkdownItem[]
将Markdown文本解析为结构化的渲染项数组。
**参数:**
- `markdown`: 要解析的Markdown文本
## 渲染效果示例
### 输入Markdown:
```markdown
# 一级标题
## 二级标题
这是一段包含**粗体**、*斜体*和`行内代码`的文本。
### 代码块示例
\```typescript
interface User {
name: string;
age: number;
}
\```
### 列表示例
- 无序列表项1
- 无序列表项2
1. 有序列表项1
2. 有序列表项2
### 表格示例
| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25 | 工程师 |
| 李四 | 30 | 设计师 |
### 其他元素
> 这是一段引用文本，用于强调重要内容。
[这是一个链接](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
- 特性: 完整视觉渲染 + 表格支持 + 图片显示