首页/工具推荐/markdown-it-ts:把老牌 markdown-it 用 TypeScript 重写一遍,到底图个啥?

markdown-it-tsmarkdown-it 的 TypeScript 重写版。

它不是另起炉灶造轮子,而是把老牌 markdown-it 用 TypeScript 整体重写了一遍。

API 还是那个 API,底子换成了 TypeScript,顺手加了流式解析、异步渲染、tree-shaking 这些现代能力。

它是个啥?

markdown-it-ts 是 Simon He 做的 TypeScript 版 markdown-it

用过 markdown-it 的话,基本不用改代码,直接换包就能跑:

import MarkdownIt from "markdown-it-ts";

const md = MarkdownIt();
const html = md.render("# Hello World");
console.log(html);

注意,它是 ESM-only,Node.js 得 >= 18。

解决了什么问题?

markdown-it 本身是个好东西,但用久了确实有几个痛点。

类型不够友好。虽然是 JS 生态的明星库,但在 TS 项目里总有点别扭。

大文档解析吃内存。一次性把整个字符串吞进去,文档一大就难受。

打包体积不够现代。tree-shaking 这块,老库确实差点意思。

markdown-it-ts 就是冲着这些痛点去的。

核心亮点

TypeScript 原生重写

不是简单包个类型声明,而是彻底用 TS 重写。类型安全是内置的,插件开发也能用上 MarkdownItPlugin 类型:

import markdownIt, { type MarkdownItPlugin } from 'markdown-it-ts'

const plugin: MarkdownItPlugin = (md) => {
  md.core.ruler.after('block', 'my_rule', (state) => {
    // 自定义逻辑
  })
}

const md = markdownIt().use(plugin)

兼容 markdown-it 公共 API

parserenderrenderInlinerenderer.rulesToken、ruler/plugin 这些常用 API 都保留了。

老项目迁移成本很低,插件基本不用重写。

流式和增量解析

这是我觉得最香的地方。

大文档不用一次性全读进来,可以按 chunk 流式解析。还提供了 StreamBufferUnboundedBufferEditableBuffer 这些工具,适合 AI 输出、实时编辑、日志渲染这种场景。

import MarkdownIt from "markdown-it-ts";
import { UnboundedBuffer } from "markdown-it-ts/experimental";

const md = MarkdownIt();
const buffer = new UnboundedBuffer(md, { mode: "stream" });

for await (const chunk of logChunks) {
    buffer.feed(chunk);
    buffer.flushAvailable();
}

异步渲染

需要异步高亮或者其他异步规则的时候,直接用 renderAsync

const html = await md.renderAsync("# Hello", {
    highlight: async (code, lang) => {
        return await someHighlighter(code, lang);
    }
});

模块化 + tree-shaking

parse 和 render 可以分开导入,构建工具能更好地摇树优化。

性能表现

项目文档里给了一组 synthetic benchmark 数据,挑几个有代表性的看看。

和上游 markdown-it 比,大文档优势明显:

文档大小markdown-it-tsmarkdown-it差距
5,000 字符0.0425ms0.2052ms快约 4.8 倍
100,000 字符1.4812ms5.3313ms快约 3.6 倍
1,000,000 字符25.81ms63.77ms快约 2.5 倍

渲染端到端也更快。100,000 字符的文档,markdown-it-ts 渲染只要 0.5141ms,markdown-it 要 6.5609ms。

当然,benchmark 数据跟 workload、CPU、Node 版本都有关系,具体到你项目里还得自己测。

谁能用上?

AI 应用里的流式 Markdown 渲染

现在各种 AI 聊天工具都是流式输出,markdown-it-ts 的流式解析正好对路。

大文档静态站点

博客、文档站如果单篇 Markdown 很大,用它能省不少解析时间。

编辑器实时预览

EditableBuffer 这种增量更新机制,很适合写个在线 Markdown 编辑器。

对类型安全有要求的项目

如果你用 TS,插件开发想有完整类型支持,它比普通 markdown-it 顺手。

我的看法

Markdown 解析器这个赛道已经很卷了。markdown-itremarkmicromark 各有所长,markdown-it-ts 的聪明之处在于:不换 API,只换底子。

迁移成本低,又能享受到 TS 和现代解析能力,这才是最实在的。

不过也得泼点冷水。它现在主要覆盖 markdown-it 的公共 API,如果你用了 markdown-it/lib/... 这种私有路径,或者依赖某些未文档化的内部状态,那得自己验证一下。

流式解析这些高级能力在 markdown-it-ts/experimental 路径下,API 未必完全稳定,生产环境里建议先小范围试点。

总结

markdown-it-ts 不是要做另一个 markdown-it,而是给 markdown-it 换一颗 TypeScript 的心脏。

它保留了熟悉的 API,补上了类型安全、流式解析、异步渲染这些现代能力,性能还更好。

如果你正在用 markdown-it,又想往 TS 生态和现代渲染场景靠,这个项目值得看看。

不知道你怎么看?欢迎在评论区留言。

如果本文对你有帮助,欢迎一键三连。