Unified、Remark 和Rehype 是 JavaScript 生态中用于处理结构化文本（如 Markdown 和 HTML）的核心工具

unified、remark 和 rehype 是 JavaScript 生态中用于处理结构化文本（如 Markdown 和 HTML）的核心工具，它们通过抽象语法树（AST）和插件机制，实现了灵活的文本解析、转换和输出。(musicfe.com)

---

🧩 unified：统一的文本处理框架

unified 是一个通用的处理框架，它本身不直接处理 Markdown 或 HTML，而是通过插件机制，配合 remark 和 rehype 等工具来实现具体的文本处理任务。

• 核心思想：将文本解析为 AST，然后通过插件对 AST 进行处理，最后再将 AST 转换为目标格式的文本。

• 主要生态：

  • remark：处理 Markdown（基于 mdast）
  • rehype：处理 HTML（基于 hast）
  • retext：处理自然语言文本
  • redot：处理 DOT 图形语言(unifiedjs.com, unifiedjs.com, juejin.cn)

unified 的处理流程类似于管道，每个插件对 AST 进行特定的转换或分析，最终输出所需的格式。(widcard.win)

---

✍️ remark：专注于 Markdown 的处理

remark 是 unified 生态中专注于 Markdown 的处理工具，提供了丰富的插件来解析、转换和输出 Markdown 内容。(ondrejsevcik.com)

• 功能特点：

  • 将 Markdown 文本解析为 mdast（Markdown 抽象语法树）
  • 通过插件对 mdast 进行处理，如语法扩展、格式转换等
  • 支持将 mdast 转换为 HTML、Markdown 或其他格式(unifiedjs.com)

常用插件包括：

• remark-parse：解析 Markdown 文本
• remark-stringify：将 mdast 转换为 Markdown 文本
• remark-gfm：支持 GitHub Flavored Markdown（GFM）扩展，如表格、任务列表等 (npmjs.com, unifiedjs.com, github.com)

---

🌐 rehype：专注于 HTML 的处理

rehype 是 unified 生态中专注于 HTML 的处理工具，提供了插件机制来解析、转换和输出 HTML 内容。

• 功能特点：

  • 将 HTML 文本解析为 hast（HTML 抽象语法树）
  • 通过插件对 hast 进行处理，如语法高亮、结构调整等
  • 支持将 hast 转换为 HTML、Markdown 或其他格式(unifiedjs.com)

常用插件包括：

• rehype-parse：解析 HTML 文本
• rehype-stringify：将 hast 转换为 HTML 文本
• rehype-raw：处理 Markdown 中的原始 HTML 内容

---

🔁 remark-rehype 与 rehype-remark：桥接 Markdown 与 HTML

remark-rehype 和 rehype-remark 是连接 remark 和 rehype 的桥梁，允许在 Markdown 和 HTML 之间进行转换。

• remark-rehype：将 mdast（Markdown AST）转换为 hast（HTML AST），使得可以在处理 Markdown 后，进一步使用 rehype 插件对 HTML 进行处理。

  示例：

  import { unified } from 'unified'
  import remarkParse from 'remark-parse'
  import remarkRehype from 'remark-rehype'
  import rehypeStringify from 'rehype-stringify'const processor = unified().use(remarkParse).use(remarkRehype).use(rehypeStringify)const html = await processor.process('# Hello World')
  console.log(String(html))
  

• rehype-remark：将 hast（HTML AST）转换为 mdast（Markdown AST），使得可以在处理 HTML 后，进一步使用 remark 插件对 Markdown 进行处理。(unifiedjs.com)

  示例：

  import { unified } from 'unified'
  import rehypeParse from 'rehype-parse'
  import rehypeRemark from 'rehype-remark'
  import remarkStringify from 'remark-stringify'const processor = unified().use(rehypeParse).use(rehypeRemark).use(remarkStringify)const markdown = await processor.process('<h1>Hello World</h1>')
  console.log(String(markdown))
  

通过这两个插件，可以在 Markdown 和 HTML 之间自由转换，结合两者的插件生态，实现更丰富的文本处理功能。(widcard.win)

---

🛠️ 应用场景与实践

unified 生态广泛应用于博客系统、文档生成、静态网站构建等场景，特别是在支持 Markdown 的平台中，如 Astro、Next.js、VitePress 等。

例如，在构建博客系统时，可以使用以下处理流程：

1. 使用 remark-parse 解析 Markdown 内容
2. 通过 remark-gfm 支持 GFM 扩展
3. 使用 remark-rehype 将 Markdown AST 转换为 HTML AST
4. 通过 rehype-highlight 实现代码高亮
5. 使用 rehype-stringify 将 HTML AST 转换为 HTML 文本(npmjs.com, github.com, unifiedjs.com, shiki.matsu.io)

这种插件化的处理流程，使得文本处理更加灵活和可扩展。

---

如果您对如何编写自定义插件、处理特定的 Markdown 或 HTML 内容，或者在特定框架中集成 unified 生态有进一步的疑问，欢迎继续提问！