Node.js + unified/remark生态是处理 Markdown最完美的方案

文章 ID: 751
分类: 随记
标签:
最后更新:
Last Updated:

Node.js 在 Markdown 处理上是最好的方案。

Node.js 在 Markdown 处理上是最好的方案。是最好。没有之一。不要用python等其他语言。 Markdown 最早主要是为网页、博客服务的,而前端社区(JavaScript/Node.js)主导了这块需求。很多静态网站生成器(Hexo、Gatsby、Next.js)都起源于 Node 生态。

Node.js 里有非常成熟的 Markdown 解析和扩展库,尤其是

  • remark(以及整个 unified/remark 生态)】👍

它们不仅支持 Markdown,还能扩展语法、插件化、AST 转换,做格式化、lint、甚至对接 JSX/React/Vue。

Node 的 remark/unified 几乎有「插件市场」级别的生态,而 Python 的 Markdown 库插件往往局限于一些常见扩展。

下面展示一下 remark/unified 生态里的一些典型插件,你就能感受到它为什么像“插件市场”一样强大。

🌳 unified/remark 核心思想

  • Markdown 先解析成 AST(MDAST)
  • 使用插件链对 AST 操作(增删改),就像 Babel 处理 JavaScript 那样
  • 最后再输出成 Markdown 或 HTML

这使得 remark/unified 成为一个通用的 Markdown 编译管道


🔌unified/remark 插件生态举例

1. 格式和语法增强

  • remark-gfm
    支持 GitHub Flavored Markdown(表格、任务列表、删除线、自动链接)。
  • remark-math + rehype-katex
    支持 LaTeX 数学公式,最后用 Katex 或 MathJax 渲染。
  • remark-emoji
    :smile: 替换为 😀。

2. 内容处理与扩展

  • remark-frontmatter
    解析 YAML frontmatter 区块,常用于博客文章的元数据。
  • remark-toc
    自动生成目录(Table of Contents)。
  • remark-autolink-headings
    给标题自动加上锚点(常用于文档页)。
  • remark-slug
    基于标题文本生成唯一 slug。

3. 转换与导出

  • remark-rehype
    Markdown → HTML(通过 rehype 做进一步 DOM AST 转换)。
  • rehype-stringify
    AST → 最终 HTML 字符串。
  • rehype-raw
    让 Markdown 中的原始 HTML 保留(默认是过滤掉的)。
  • remark-html
    直接 Markdown → HTML(更简单,但扩展性不如 rehype 路线)。

4. 质量与规范工具

  • remark-lint
    整个 Markdown 的 Lint 框架,可以检测标题格式、行尾空格、缩进等等。
  • remark-lint-no-dead-urls
    检测 Markdown 文档里是否有坏掉的超链接。
  • remark-lint-maximum-line-length
    控制每行最大字符数,保证格式整齐。

5. 应用层插件(高阶场景)

  • remark-mdx
    将 Markdown 转换成 MDX(可以直接在 Markdown 中写 React 组件)。
  • rehype-react
    把 HTML AST 直接转换成 React 元素(非常适合 React 应用里做 Markdown 渲染)。
  • rehype-sanitize
    过滤掉潜在的 XSS 攻击代码,保证 Markdown 渲染安全。

💡 NodeJS和Python处理Markdown的直观对比。碾压级别。

比如你要做一个在线 Markdown 博客

  • Python 的 markdown 库:

    python

    import markdown
    html = markdown.markdown(text)
    

    → 直接输出 HTML,能用,但扩展性有限。

  • Node 的 remark/unified:

    import { unified } from 'unified'
    import remarkParse from 'remark-parse'
    import remarkGfm from 'remark-gfm'
    import remarkToc from 'remark-toc'
    import remarkRehype from 'remark-rehype'
    import rehypeStringify from 'rehype-stringify'
    
    const file = await unified()
      .use(remarkParse)
      .use(remarkGfm)
      .use(remarkToc)
      .use(remarkRehype)
      .use(rehypeStringify)
      .process('# Hello\n\n- [ ] task\n\n## Subtitle')
      
    console.log(String(file))
    

    → 你可以拼接各种插件,实现 GitHub 风格、目录、HTML 输出,全程插件驱动。


👉 这就是为什么很多人说:**remark/unified 生态更像“乐高积木”,可以自由拼装。

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部