# ohos_ai_markdown

**Repository Path**: hellogitlsf/ohos_ai_markdown

## Basic Information

- **Project Name**: ohos_ai_markdown
- **Description**: HarmonyOS解析markdown
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-31
- **Last Updated**: 2026-08-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ohos_ai_markdown

一款适用于 HarmonyOS / OpenHarmony 的原生 Markdown 渲染组件，无需 WebView 依赖，纯原生 ArkUI 渲染。

## 特性

- **纯原生渲染** — 无 WebView 依赖，基于 ArkUI 声明式语法渲染 Markdown
- **丰富的语法支持** — 标题、文本、代码块、引用、图片、超链接、表格、任务列表、分割线、脚注等
- **代码高亮** — 内置 ArkTS / TypeScript 语法高亮，支持自定义高亮配色
- **Mermaid 图表** — 支持在 Markdown 中渲染 Mermaid 流程图、序列图等
- **HTML 预览** — 支持 HTML 代码块内联预览
- **插件系统** — 支持自定义行内 / 块级语法扩展（MarkdownPlugin）
- **Worker 线程解析** — 解析任务可运行在 Worker 线程，不阻塞 UI
- **懒渲染** — 可见区域外块以轻量占位渲染，进入视口后渲染真实内容
- **跨 Text 文本选择** — 支持跨多个 Text 组件的文本选择、复制
- **三种加载模式** — 纯文本 / rawfile 资源文件 / 沙箱文件

## 安装

```bash
ohpm install ohos_ai_markdown
```

## 快速使用

### 基础用法

```typescript
import { Markdown, MarkdownController } from 'ohos_ai_markdown'

@Entry
@Component
struct Index {
  controller: MarkdownController = new MarkdownController()

  build() {
    Scroll() {
      Markdown({
        controller: this.controller,
        text: '# Hello World\n\n这是一个 **Markdown** 示例。',
        mode: 'text'
      })
    }
  }
}
```

### 加载 rawfile 资源文件

```typescript
Markdown({
  controller: this.controller,
  mode: 'rawfile',
  rawfilePath: 'markdown/demo.md',
  context: getContext(this)
})
```

### 加载沙箱文件

```typescript
Markdown({
  controller: this.controller,
  mode: 'sandbox',
  sandboxPath: getContext().getApplicationContext().filesDir + '/demo.md'
})
```

## MarkdownController 样式配置

`MarkdownController` 支持链式调用，统一配置 Markdown 组件样式：

```typescript
this.controller
  .setTitleColor('#1d2c39')
  .setTextSize(16)
  .setTextColor('#1f1f39')
  .setCodeBlockTheme('dark')
  .setQuoteBorderColor('#F4271C')
  .setHyperlinkTextColor('#0664EC')
  .setImageBorderRadius(14)
```

### 可用接口

| 接口 | 说明 | 版本 |
|------|------|------|
| `setTitleColor(color)` | 设置标题颜色 | 3.2.2 |
| `setTitleSize(sizes)` | 设置标题字号（1-6 级） | — |
| `setTitleLineHeight(heights)` | 设置标题行高（1-6 级） | — |
| `setTitleFontWeight(weight)` | 设置标题字体粗细 | 3.2.2 |
| `setTitleFontStyle(style)` | 设置标题字体样式 | 3.2.2 |
| `setTitleFontFamily(family)` | 设置标题字体族 | 3.2.4 |
| `setTextColor(color)` | 设置普通文本颜色 | — |
| `setTextSize(size)` | 设置普通文本字号 | — |
| `setTextLineHeight(height)` | 设置普通文本行高 | — |
| `setTextFontFamily(family)` | 设置普通文本字体族 | — |
| `setInlineCodeColor(color)` | 设置行内代码颜色 | — |
| `setInlineCodeBackgroundColor(color)` | 设置行内代码背景颜色 | — |
| `setInlineCodeBackgroundRadius(radius)` | 设置行内代码背景圆角 | — |
| `setQuoteTextColor(color)` | 设置引用块文本颜色 | — |
| `setQuoteBorderColor(color)` | 设置引用块左边颜色 | — |
| `setQuoteBorderWidth(width)` | 设置引用块左边宽度 | 3.2.2 |
| `setQuoteBackgroundColor(color)` | 设置引用块背景颜色 | — |
| `setQuoteBorderRadius(radius)` | 设置引用块圆角 | 3.2.2 |
| `setQuotePadding(padding)` | 设置引用块内边距 | 3.3.0 |
| `setCodeBlockTheme(theme)` | 设置代码块主题 (`light` / `dark`) | — |
| `setCodeBlockIdxState(state)` | 设置代码块行号展示状态 | — |
| `setCodeBlockBorderRadius(radius)` | 设置代码块圆角 | 3.2.2 |
| `setCodeBlockAutoCollapseEnable(enable)` | 设置代码块自动折叠 | — |
| `setCodeBlockAutoCollapseThreshold(threshold)` | 设置代码块自动折叠阈值 | — |
| `setCodeBlockActionAreaVisible(visible)` | 设置普通代码块操作区展示状态 | 3.4.6 |
| `setCodeHighlight(highlight)` | 设置代码高亮配色 | — |
| `setCodeCopyListener(listener)` | 设置代码块复制监听 | — |
| `setImageWidth(width)` | 设置图片宽度 | — |
| `setImageHeight(height)` | 设置图片高度 | — |
| `setImageMaxWidth(width)` | 设置图片最大宽度 | — |
| `setImageMaxHeight(height)` | 设置图片最大高度 | — |
| `setImageBorderRadius(radius)` | 设置图片圆角 | 3.2.2 |
| `setImageClickListener(listener)` | 设置图片点击监听 | — |
| `setImageLoadProxy(proxy)` | 设置图片加载代理 | — |
| `setHyperlinkTextColor(color)` | 设置超链接文字颜色 | — |
| `setHyperlinkTextSize(size)` | 设置超链接文字字号 | 3.2.2 |
| `setHyperlinkUnderlineState(state)` | 设置超链接下划线展示状态 | — |
| `setHyperlinkBackgroundColor(color)` | 设置超链接背景颜色 | — |
| `setHyperlinkBackgroundRadius(radius)` | 设置超链接背景圆角 | — |
| `setHyperlinkClickListener(listener)` | 设置超链接点击监听 | — |
| `setTableBackgroundColor(color)` | 设置表格背景色 | — |
| `setTableTitleBackgroundColor(color)` | 设置表格表头背景色 | — |
| `setTableBorderRadius(radius)` | 设置表格圆角 | 3.2.2 |
| `setTableOuterBorderColor(color)` | 设置表格外边框颜色 | 3.2.2 |
| `setTableOuterBorderWidth(width)` | 设置表格外边框宽度 | 3.2.2 |
| `setTableInnerBorderColor(color)` | 设置表格内边框颜色 | 3.2.2 |
| `setTableInnerBorderWidth(width)` | 设置表格内边框宽度 | 3.2.2 |
| `setTableAlign(align)` | 设置表格对齐方式 | 3.2.2 |
| `setTableActionBackgroundColor(color)` | 设置表格操作区背景色 | 3.4.6 |
| `setTableActionIconColor(color)` | 设置表格操作图标颜色 | 3.4.6 |
| `setTableCopyClickListener(listener)` | 设置表格复制监听 | 3.4.6 |
| `setTableDownloadClickListener(listener)` | 设置表格下载监听 | 3.4.6 |
| `setTableExpandClickListener(listener)` | 设置表格放大监听 | 3.4.6 |
| `setTodoSelectedColor(color)` | 设置任务列表选中颜色 | — |
| `setTodoSelectSize(size)` | 设置任务列表选项大小 | — |
| `setUlPointSize(size)` | 设置无序列表指示点大小 | 3.2.2 |
| `setUlPointColor(color)` | 设置无序列表指示点颜色 | 3.2.2 |
| `setFootnoteTextColor(color)` | 设置脚注文字颜色 | — |
| `setLineColor(color)` | 设置分割线颜色 | — |
| `setMermaidEnable(enable)` | 设置是否开启 Mermaid 渲染 | — |
| `setMermaidTheme(theme)` | 设置 Mermaid 主题 | — |
| `setMermaidSecurityLevel(level)` | 设置 Mermaid 安全级别 | — |
| `setHtmlPreviewEnable(enable)` | 设置是否开启 HTML 预览 | — |
| `setHtmlPreviewJavaScriptEnable(enable)` | 设置 HTML 预览是否允许 JS | — |
| `setWebPreviewPoolEnable(enable)` | 设置 Web 预览池复用 | — |
| `setWebPreviewPoolSize(initial, max, idle)` | 设置 Web 预览池大小 | — |
| `setThreadRenderEnable(enable)` | 设置 Worker 线程解析模式 | — |
| `setLazyRender(enable)` | 设置懒渲染 | — |
| `setLazyPreloadBlockCount(count)` | 设置懒渲染预渲染块数量 | — |
| `setTextSelectionEnable(enable)` | 设置跨 Text 文本选择 | 3.3.2 |
| `setTextSelectionCopyListener(listener)` | 设置文本选择复制监听 | 3.3.2 |
| `setTextSelectionActionItems(items)` | 设置选区操作栏按钮 | — |
| `setLongPressMenuEnable(enable)` | 设置长按菜单模式 | — |
| `setLongPressMenuListener(listener)` | 设置长按菜单回调 | — |
| `setSetextHeadingEnable(enable)` | 设置 Setext 标题解析 | — |
| `setBlockSpacing(spacing)` | 设置块级元素间距 | 3.3.0 |

## 插件系统

通过 `MarkdownPlugin` 可以扩展自定义语法：

```typescript
import { Markdown, MarkdownController, MarkdownPlugin, PluginNode } from 'ohos_ai_markdown'

@Builder
function myPluginBuilder(node: PluginNode) {
  Text(node.raw)
    .fontColor(Color.Red)
    .fontSize(16)
}

const myPlugin: MarkdownPlugin = {
  key: 'mention',
  display: 'inline',
  pattern: '@\\w+',
  matchMode: 'inline-prefix',
  render: wrapBuilder(myPluginBuilder)
}

Markdown({
  controller: this.controller,
  text: 'Hello @world',
  plugins: [myPlugin]
})
```

## 代码高亮自定义

```typescript
import { MarkdownController, CodeHighlight } from 'ohos_ai_markdown'

const highlight = new CodeHighlight()
highlight.keyword = '#c678dd'
highlight.string = '#98c379'
highlight.comment = '#5c6370'

this.controller.setCodeHighlight(highlight)
```

## 回调事件

```typescript
import { MdCallback } from 'ohos_ai_markdown'

const callback: MdCallback = {
  complete() {
    console.info('Markdown 渲染完成')
  },
  fail(code: number, message: string) {
    console.error(`Markdown 渲染失败: ${code} - ${message}`)
  }
}

Markdown({
  controller: this.controller,
  text: '# Hello',
  callback: callback
})
```

```typescript
import { Markdown } from 'ohos_ai_markdown'
```