Markdown

markdown

只读 Markdown 渲染 · 零依赖块级解析(标题/代码块/列表/引用/行内粗斜码链) · 套 Prose 排版 + 围栏代码块委托 CodeBlock · 区别 MarkdownEditor 可编辑 · RSC 安全

用法

基础用法

把 Markdown 源文本作为 children 传入，零依赖只读渲染，排版吃 Prose 语义 token。

快速排序

下面是一个简洁的实现：

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

平均复杂度 O(n log n)，最坏 O(n²)。要点：

随机选 pivot 规避最坏情况
行内 代码 与外链正常渲染

引用块也支持，整体排版吃 Prose 语义 token。

tsx

<Markdown>{`## 快速排序

平均复杂度 **O(n log n)**，要点：

- 随机选 *pivot* 规避最坏情况
- 行内 \`代码\` 与[外链](https://mdn.io)正常渲染

> 引用块也支持。`}</Markdown>

表格

支持 GFM 风格表格，渲染为描边容器 + 表头浅底 + 行斑马纹。

组件对照

组件	用途	可编辑
Markdown	只读渲染	否
MarkdownEditor	富文本编辑	是

行内 代码 与粗体在表格外正常渲染。

tsx

<Markdown>{`## 组件对照

| 组件 | 用途 | 可编辑 |
| --- | --- | --- |
| Markdown | 只读渲染 | 否 |
| MarkdownEditor | 富文本编辑 | 是 |
`}</Markdown>

紧凑尺寸

size="sm" 透传给内部 Prose，整体排版基准降到 text-sm。

快速排序

下面是一个简洁的实现：

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

平均复杂度 O(n log n)，最坏 O(n²)。要点：

随机选 pivot 规避最坏情况
行内 代码 与外链正常渲染

引用块也支持，整体排版吃 Prose 语义 token。

tsx

<Markdown size="sm">{markdownSource}</Markdown>

何时用

把一段 Markdown 源字符串只读渲染成排版好的富文本（标题/围栏代码块/列表/引用/行内粗斜码链）。需要可编辑用 [MarkdownEditor]；已经是 HTML/JSX 而非 Markdown 源用 Prose 直接包裹；单段原子文本用 Text。parseBlocks 导出供需要拿块级 AST 自定义渲染的场景。

导入

import { Markdown, parseBlocks } from "@hulianui/ui"

Props

名称	类型	默认	说明
size	`"sm" \| "base"`	`"base"`	排版尺寸基准，透传给内部 Prose
className	`string`	—	透传容器类名

Slots

插槽	类型	说明
children	`string`	Markdown 源文本（只读渲染；编辑用 MarkdownEditor）

禁忌 / 坑

零依赖块级解析输出 JSX（非 dangerouslySetInnerHTML/innerHTML），不走原生 HTML sink，故无 [[dompurify-vhtml-markdown-sanitize]] 那类存储型 XSS 风险；但若后续改造成「直接注入 HTML」或扩展支持原始 HTML 标签，必须经 DOMPurify 等清洗后再渲染，不要把不可信源直接喂进 innerHTML。
只读组件，不接受编辑回调；需要双向编辑改用 MarkdownEditor。

Playground

排版尺寸

快速排序

下面是一个简洁的实现：

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

平均复杂度 O(n log n)，最坏 O(n²)。要点：

随机选 pivot 规避最坏情况
行内 代码 与外链正常渲染

引用块也支持，整体排版吃 Prose 语义 token。

<Markdown size="base">{`\n## 标题\n\n正文 **粗体** 与 \`代码\`\n`}</Markdown>

用法

基础用法

把 Markdown 源文本作为 children 传入，零依赖只读渲染，排版吃 Prose 语义 token。

快速排序

下面是一个简洁的实现：

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

平均复杂度 O(n log n)，最坏 O(n²)。要点：

随机选 pivot 规避最坏情况
行内 代码 与外链正常渲染

引用块也支持，整体排版吃 Prose 语义 token。

tsx

<Markdown>{`## 快速排序

平均复杂度 **O(n log n)**，要点：

- 随机选 *pivot* 规避最坏情况
- 行内 \`代码\` 与[外链](https://mdn.io)正常渲染

> 引用块也支持。`}</Markdown>

表格

支持 GFM 风格表格，渲染为描边容器 + 表头浅底 + 行斑马纹。

组件对照

组件	用途	可编辑
Markdown	只读渲染	否
MarkdownEditor	富文本编辑	是

行内 代码 与粗体在表格外正常渲染。

tsx

<Markdown>{`## 组件对照

| 组件 | 用途 | 可编辑 |
| --- | --- | --- |
| Markdown | 只读渲染 | 否 |
| MarkdownEditor | 富文本编辑 | 是 |
`}</Markdown>

紧凑尺寸

size="sm" 透传给内部 Prose，整体排版基准降到 text-sm。

快速排序

下面是一个简洁的实现：

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

平均复杂度 O(n log n)，最坏 O(n²)。要点：

随机选 pivot 规避最坏情况
行内 代码 与外链正常渲染

引用块也支持，整体排版吃 Prose 语义 token。

tsx

<Markdown size="sm">{markdownSource}</Markdown>

何时用

名称

类型

默认

说明

size

"sm" | "base"

"base"

排版尺寸基准，透传给内部 Prose

className

string

—

透传容器类名

插槽

类型

说明

children

string

Markdown 源文本（只读渲染；编辑用 MarkdownEditor）

禁忌 / 坑

零依赖块级解析输出 JSX（非 dangerouslySetInnerHTML/innerHTML），不走原生 HTML sink，故无 [[dompurify-vhtml-markdown-sanitize]] 那类存储型 XSS 风险；但若后续改造成「直接注入 HTML」或扩展支持原始 HTML 标签，必须经 DOMPurify 等清洗后再渲染，不要把不可信源直接喂进 innerHTML。

只读组件，不接受编辑回调；需要双向编辑改用 MarkdownEditor。

Playground

排版尺寸

快速排序

下面是一个简洁的实现：

function quickSort(arr) {
  if (arr.length <= 1) return arr;
  const [pivot, ...rest] = arr;
  return [
    ...quickSort(rest.filter((x) => x < pivot)),
    pivot,
    ...quickSort(rest.filter((x) => x >= pivot)),
  ];
}

平均复杂度 O(n log n)，最坏 O(n²)。要点：

随机选 pivot 规避最坏情况
行内 代码 与外链正常渲染

引用块也支持，整体排版吃 Prose 语义 token。

<Markdown size="base">{`\n## 标题\n\n正文 **粗体** 与 \`代码\`\n`}</Markdown>

Markdown

用法

基础用法

快速排序

表格

组件对照

紧凑尺寸

快速排序

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

快速排序

Markdown

用法

基础用法

快速排序

表格

组件对照

紧凑尺寸

快速排序

何时用

导入

Props

Slots

禁忌 / 坑

相关

Playground

快速排序