unified 实现 markdown 与 html的互转

19 min read

https://unifiedjs.com/

Markdown 转 HTML

unified() // 使用 unified 统一的接口
  .use(remarkParse)  // 使用 Markdown 解析器插件
  .use(remarkStringify) // 使用 Markdown 文本序列化插件
  .processSync('# Hello, world!')

remark

remark 是unified 生态相关插件,提供 Markdown 相关的插件集合，提供了 Markdown 的解析、修改、转换为 HTML 等能力。

目前提供的一些常用插件：

  • remark-parse: 提供解析 Markdown 的能力
  • remark-gfm: 提供 GFM (GitHub flavored markdown) 支持
  • remark-lint: 提供 Markdown 的代码检查能力
  • remark-toc: 提供 Markdown 文档目录生成功能
  • remark-html 提供将 Markdown 编译为 HTML 的能力
remark() // 一键初始化 Markdown 解析器
  .processSync('# Hello, world!') // 同步处理文本

HTML 转 Markdown

import { unified } 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)     // 解析 HTML
  .use(rehypeRemark)    // 转换到 remark 体系
  .use(remarkStringify) // 将语法树转换为 Markdown 字符串

process.stdin.pipe(stream(processor)).pipe(process.stdout)

原理

unified 的核心机制是基于 AST（abstract syntax trees，抽象语法树），在执行插件时 AST 会被传递给插件，可以对其进行各种处理。同时，也可以基于 AST 进行各种语言的转换，例如将 Markdown 文档解析后，转换为 HTML 进行处理，之后再转回 Markdown。