做过「Markdown → 图片」的，应该都踩过这个坑：

Markdown → HTML → 浏览器 → 截图

然后你就会遇到：

• chromium 很重（部署麻烦）
• 分页不稳定（每次结果都可能不一样）
• 批量渲染性能很差
• serverless 环境基本不好搞 我最近有点受不了这套链路，就自己写了一个： marknative ---

核心思路（和常规方案完全不一样）

不走 HTML，不走 DOM，不走浏览器。

而是：

Markdown → AST → 自定义文档模型 → layout → 分页 → canvas 绘制

简单理解：

把“浏览器排版”这件事，自己实现了一套极简版本（只针对 Markdown）。

---

能干什么？

1. 直接输出 PNG / SVG

import { renderMarkdown } from 'marknative'

const pages = await renderMarkdown('# Hello')

await Bun.write('page-1.png', pages[0].data)

不需要：

• puppeteer
• headless chrome
• 截图 ---

2. 天然支持分页（而且是稳定的）

默认就是：

• 1080 × 1440
• 类似卡片比例 而且分页是 deterministic 的：
• 同一份 Markdown
• 任意环境
• 渲染结果一致 --- ### 3. 适合批量生成内容 比如：
• 小红书卡片
• 技术文章配图
• AI 自动生成内容图 相比 puppeteer：
• 启动更快
• 内存更低
• 更容易横向扩展 --- ## 这个方向值得做

本质上，这类需求其实是：

“结构化文本 → 可控排版 → 图像输出” 但浏览器：

• 太通用（为网页设计）
• 不可控（CSS + layout 太复杂）
• 成本太高 而 Markdown 场景：
• 结构固定
• 可约束
• 非常适合做“专用排版引擎” --- ## 技术点（简单说几个有意思的）
• 用 micromark + mdast 做解析
• 自己实现 block / inline layout
• 用 skia-canvas 直接绘制
• layout 和 render 完全解耦 所以理论上可以
• 换 renderer（SVG / PDF / WebGL）
• 做自定义主题系统
• 做可视化编辑器（未来） --- ## 项目地址

👉 https://github.com/liyown/marknative