核心内容摘要
CSS知识点
实体声明与出处标注_实体声明与出处标注规范指南
01unified 到底是什么？ unified 并非一个工具，而是一套 “统一接口 + 插件”的文本处理架构。它本身只做两件事： 把文本读进来 把文本写出去 中间的任何加工步骤，比如解析、转换、校验、美化，全部交给生态里的插件完成。因为接口统一，同一套代码就能在不同文本格式（Markdown、HTML、甚至自然语言）之间自由切换。 官网数据显示， Prettier、Node.js 官网、Gatsby都在底下偷偷用 unified 完成各自任务，可见其普及度。 图：unified 官网的使用举例 02插件生态地图：四条主线怎么选？ unified 生态像一张蛛网，核心是四条主线，每条线上都挂着几十到一百五十个插件，下面逐一拆开。2.1 ◉ remark：Markdown 全能选手 remark 提供的不是单一工具，而是一整套 “写—读—改—输出”的闭环。常用插件如下： remark-parse：把 Markdown 字符串切成抽象语法树（AST） remark-gfm：加入 GitHub Flavored Markdown 支持 remark-lint：像 ESLint 一样给 Markdown 加规则校验 remark-toc：自动生成目录 remark-html：把 AST 直接吐成 HTML 想在项目里玩一把？一行代码即可： ```javascript remark().processSync('# Hello, world!'); ``` 等价于更“官方”的写法： ```javascript unified() .use(remarkParse) .use(remarkStringify) .processSync('# Hello, world!'); ``` 图：remark 使用和转换示例 注意：GitHub 上还有一个同名项目 ，官网是 ，与 unified 生态下的 remark 完全无关，搜索时别绕晕。2.2 ◉ rehype：HTML 的后端加工厂 rehype 插件数量相对少，只有四十来个，却个个能打：格式化、压缩、生成文档都在行。 想让 HTML 在不同场景下“变身”，可以用 把 HTML AST 转回 Markdown，再用 remark 体系加工；反过来也能用 把 Markdown 转回 HTML。一条命令就能把 stdin 的 HTML 转成 Markdown： ```javascript import from 'unified'; import { stream } from 'unified-stream'; import rehypeParse from 'rehype-parse'; import rehypeRemark from 'rehype-remark'; import remarkStringify from 'remark-stringify'; const processor = unified() .use(rehypeParse) .use(rehypeRemark) .use(remarkStringify); process.stdin.pipe(stream(processor)).pipe(process.stdout); ```2.3 ◉ retext & redot：小众但有用的小家伙们 retext 负责 自然语言处理——拼写检查、可读性分析、错误修正；redot 则负责把 Graphviz 的 DOT 语言图直接搬进浏览器。虽然社区不大，但关键时刻能救命。2.4 ◉ mdx & micromark：Markdown 的“双生兄弟” mdx 让 Markdown 文件里直接写 JSX，实现可交互文档，非常适合组件库与开源项目。 micromark 是极致轻量级解析器，只保留核心功能，适合“只要能转就能用”的场景，remark 的核心也复用了它的解析逻辑。 03工作原理：一句话搞定 AST 流转 unified 的核心只有一句话—— “读—改—写”，中间靠抽象语法树（AST）打酱油。 把文本读进来 → 生成 AST 把插件串成链 → 一路改 AST 把 AST 写回去 → 生成新文本 因为所有格式共用同一套 UST（Unified Syntax Tree）标准，所以 Markdown、HTML、甚至未来支持的格式，可以共用同一套遍历与转换逻辑。 例如，想打印所有标题节点，只需一行： ```javascript visit(tree, 'heading', node => console.log(node)); ``` 提供的就是这种统一遍历 API，无需关心底层是 Markdown 还是 HTML。 图：unified 工作流程 上图清晰地展示了从 Markdown 到 HTML 的流转路径，每一步都插得上手。 04实战场景：代码里的 unified 长什么样？4.1 ◉ Node.js 官网——语法检查 + 文档生成一条龙 用 remark-cli 在 里跑语法校验 用 unified 在 里把 Markdown 转成静态站点页面 双保险！ 详见开源仓库。 ### 4.2 dumi——组件文档的“自动生产线” dumi 把 Markdown 当作源代码，一键生成交互式组件文档。源码里遍地是自定义插件，拿来就能当模板。例如 里给外部链接加图标的小动作，就是遍历 AST 时做的小手术。 ### 4.3 react-markdown——React 里的安全渲染方案 直接用 remark 把 Markdown 转成 AST，再用 remark-rehype 转成 React 能识别的 hast，最后用 rehype 的 React 插件渲染成元素。整条链路封装在 里，既安全又省心。图：react-markdown 工作原理 上图把流程拆成四步，照着抄作业也能做出自己的 Markdown 渲染器。## 5. 数据与幕后：333 个项目 & 一人撑起的宇宙 截至 2022 年初，unified 生态共维护 333 个开源项目，核心开发者是荷兰人 Titus Wormer。阿姆斯特丹应用科学大学毕业的他，毕业后专职做开源，把统一接口这个看似微小的点子做成横跨语言、框架、场景的巨型生态。凭一人之力维护 535+ 项目中的一半时间，还能保持迭代节奏，这份执念值得点赞。想学他如何管理团队与节奏，直接翻 的文档即可。 举报/反馈
