将日常 Markdown 文档一键整理为适合发布到小红书的连续图片卡片。
粘贴或导入一篇 Markdown，在线预览、微调排版后，下载 PNG 图片包，直接发布。
Md2Card 是一个纯前端的 Markdown 转小红书图片工具。它适合把平时写好的学习笔记、读书摘录、课程总结、技术文章、科研记录或知识整理，快速转成一组可连续阅读、可直接发布的图片。
它没有账号、没有后端、不会上传文章：Markdown 解析、本地图片按引用自动匹配、自动分页、实时预览、PNG 生成和 ZIP 下载均在当前浏览器完成。
- 直接复用已经写好的 Markdown，不必复制到另一套排版工具；
- 自动分页并统一字体、间距和阅读节奏，避免靠截图拼成长图；
- 可选择主题、封面、画布比例和阅读密度，按内容微调；
- 导出逐页 PNG 并打包为 ZIP，可按顺序直接发布到小红书。
| 关注点 | Md2Card 的处理方式 |
|---|---|
| 内容安全 | 没有上传接口；GitHub Pages 只托管静态网页，文章与图片留在本地浏览器 |
| 复杂内容 | KaTeX 公式、GFM 表格、代码与图片各自拥有合适的缩放、续页和样式规则 |
| 本地图片 | 按 Markdown 相对路径定位，只读取当前文章实际引用的图片，不导入无关附件 |
| 真实分页 | 使用与预览一致的 DOM 高度测量，不按字数或行数估算 |
| 所见即所得 | 预览、导出前检查和 PNG 导出共用同一份页面计划与卡片 DOM |
| 可交付导出 | 标准发布或高清原图逐页生成 PNG，并打包为 ZIP 下载 |
打开 Md2Card 工作台，粘贴或导入一篇 Markdown 笔记，把它整理成一组可直接发布的小红书图片。
- 输入、拖放或导入单篇
.md/.markdown/.txt； - 在右侧检查自动分页后的卡片；
- 在“主题 / 画布 / 排版 / 内容”中按需细调；
- 点击右上角“下载图片”，通过检查后下载 PNG ZIP。
默认的 3:4 画布、平衡密度与融合首卡 已适合大多数笔记。遇到长公式或宽表格时，优先在“内容”分类调整对应项目，无需连带缩小普通正文。
首次打开工作台时，会看到一篇不含本地图片、可直接预览多张卡片的产品演示。仓库中的完整样例则包含三张 SVG，用于体验真实文章的本地附件绑定。
examples/
├── Md2Card Example.md
└── images/
├── architecture.svg
├── sampling-pipeline.svg
└── wide-matrix.svg
- 下载整个
examples文件夹或 Clone 仓库，不要只下载.md文件； - 导入
Md2Card Example.md，也可以直接拖入编辑区； - 检测到图片引用后，选择
examples目录，或在“管理图片”中点击“自动补齐（选择图片所在文件夹）”； - 确认三张 SVG 已绑定，再尝试不同画布比例、密度与主题；
- 分别使用标准发布和高清原图导出，检查页序、图片与表格是否一致。
样例覆盖 H1 / H2 / H3、中文与英文混排、三张本地图片、行内与展示公式、宽表、长表、Python / TypeScript 代码、嵌套列表、长 URL、引用和显式分页。详见 示例说明。
推荐 Node.js 22 或更高版本。
npm install
npm run dev使用终端输出的本地地址访问网站，通常为 http://localhost:5173。不要直接双击 HTML 文件：file:// 环境可能限制模块、字体和本地资源读取。
npm test # 单元测试
npm run build # 类型检查并构建 dist/
npm run preview- 粘贴、拖放或导入单篇
.md/.markdown/.txt。 - 一键清空当前文章、附件与图片绑定，同时保留排版设置。
- 标题、段落、强调、链接、列表、引用、行内代码和水平线。
- GFM 表格、围栏代码、行内 / 展示数学公式和独立图片。
- 首个 H1 自动作为文章名与可选首卡标题，正文不重复渲染。
- 本地图片按完整相对路径、
./、../与目录后缀匹配。 - 图片路径冲突明确提示，绝不静默随机绑定。
- 图片管理器支持自动补齐、手动添加、显式绑定和资源清理。
- 3:4 标准卡片与 2:3 长内容画布。
- 融合首卡、独立封面与无封面三种首卡策略。
- 纯净排版、雾蓝实验室、柔光浅紫、雾松笔记四套完整主题。
- 舒展、技术平衡、紧凑三种密度预设，以及主题、画布、排版、内容四类细调。
- 表格字号、公式缩放、代码字号独立控制，不连带缩小普通正文。
- H2 / H3 / H4 分级页尾安全区与标题簇保护，避免标题孤立在页尾。
- 超高表格按行续页并重复表头，长代码按行续页；图片与图注保持同块。
- 手动分页标记
<!-- md2card:break -->，而---保持 Markdown 分隔线语义。
- 桌面端可拖动的编辑 / 设置 / 预览工作台；移动端分为编辑、设置、预览三个工作区。
- 预览区按一、二、三列自动计算卡片缩放，默认双列。
- 标准发布与高清原图两档 PNG，逐页打包为 ZIP。
- 导出前检查 Markdown 诊断、字体、图片解码和卡片垂直溢出。
- 对 PNG MIME 类型与文件头进行校验，避免下载损坏文件。
- 草稿、配置、图片 Blob 与显式绑定关系保存到当前浏览器的 IndexedDB。
- GitHub Actions 自动测试、构建并部署到 GitHub Pages。
文章名按以下优先级确定：手动填写的文章名 → 首个 H1 → 导入文件名 → 未命名笔记。首个 H1 是文章元数据，会用于浏览器标题、草稿、ZIP 名称和可选首卡，因此不在正文重复渲染；后续 H1 仍视为章节起点。
分页不是按行数或字符数切割。应用会在屏幕外以与最终卡片相同的 CSS 测量内容，再生成页面计划。H2 / H3 / H4 拥有独立的页尾安全区，标题会携带必要的上下文移动；H2 还会尽量带上短引言之后的实质内容。安全区与 H2 / H3 段前留白可在 排版 → 标题 中调整。
| 内容 | 处理策略 |
|---|---|
| 普通段落 | 保持正文宽度、字号、行距与块间距 |
| 宽表格 | 单独使用表格字号；超高时按行续页并重复表头 |
| 长公式 | 单独缩放；特别复杂时建议使用 aligned 等多行写法 |
| 长代码 | 独立字号、可选 macOS 代码块外观；按源代码行续页 |
| 图片 | 在安全区内 contain 缩放，图片和图注不拆开 |
| 明确换页 | 写入单独一行 <!-- md2card:break --> |
Markdown 只保存路径，例如：
单独选择 .md 文件后，浏览器没有该文件父目录的操作系统权限。这是浏览器的安全模型，不是 Md2Card 的限制。检测到本地图片引用时，选择文章根目录或 assets 文件夹即可：应用先索引相对路径和文件名，再只读取当前文章实际引用到的图片，不会把整个目录都导入草稿。
| 操作 | 适用场景 | 行为 |
|---|---|---|
| 自动补齐（选择图片所在文件夹） | Markdown 有缺失或冲突的图片引用 | 选择文章根目录或 assets，按路径匹配实际引用 |
| 手动添加图片 | 无目录权限、替换图片、处理冲突 | 多选图片；选中某个引用时直接建立显式绑定 |
完整相对路径优先。存在同名候选或相同路径后缀时，状态会显示为“路径冲突”，需要在图片管理器中确认；原 Markdown 不会被自动改写。远程图片由浏览器直接请求其来源站点，若来源不允许 CORS 访问，导出前检查会提示失败。
| 选项 | 3:4 | 2:3 | 建议 |
|---|---|---|---|
| 标准发布 | 1080 × 1440 | 1080 × 1620 | 常规发布，速度更快、文件更小 |
| 高清原图 | 2160 × 2880 | 2160 × 3240 | 公式、表格放大查看或留存 |
导出前会等待字体和图片加载，并检查 Markdown 警告、图片状态和卡片边界。通过后，预览当前所见的同一份卡片 DOM 会逐页生成 PNG，并被打包成 ZIP。长文或高清导出会使用更多浏览器内存，请在导出时保持页面打开。
| 类型 | 支持 |
|---|---|
| 标题 | # 至 ###### |
| 基础文本 | 段落、粗体、斜体、删除线、链接、行内代码、换行 |
| 列表与引用 | 有序 / 无序 / 嵌套列表，引用块 |
| 表格 | GFM 表格及列对齐 |
| 代码 | 围栏代码；Python、Bash、JSON、TypeScript、JSX、TSX 高亮，其余语言降级为纯文本 |
| 数学 | $...$、$$...$$、\(...\)、\[...\] |
| 图片 | 独立图片块 ；图片标题优先作为图注，未填写时使用替代文本 |
| 图注与表注 | 图片 / 表格后紧随 图 1：说明 或 表 1：说明 时，会自动归入前一个内容块并与其同页 |
| 分隔线 | --- |
为保证导出安全与一致，原始 HTML 会被忽略。内联图片、复杂 HTML 混排、脚注和 Mermaid 暂不属于稳定支持范围；复杂宽表和极长公式建议优先拆分内容或使用 2:3 长内容画布。
| 数据 | 存放与处理方式 |
|---|---|
| Markdown 与排版设置 | 当前浏览器内存与 IndexedDB 草稿 |
| 本地图片 | 浏览器内存、Object URL 与 IndexedDB Blob |
| PNG / ZIP | 在浏览器生成并下载到本机 |
| GitHub Pages | 只托管 HTML、CSS、JavaScript、字体和静态资源 |
| GitHub Actions | 只安装依赖、测试、构建和部署代码，不处理用户文章 |
最新版桌面 Chrome / Edge 是完整支持平台，尤其适合目录索引与稳定导出。手机浏览器可编辑和预览，但高清长文导出受内存限制；Safari / Firefox 可进行基础预览，暂不承诺完全一致的导出结果。清除本站点数据会清除该浏览器保存的草稿和导入图片。
flowchart LR
A["Markdown 与本地图片"] --> B["解析与资源解析"]
B --> C["文档模型"]
C --> D["真实 DOM 测量与分页"]
D --> E["统一卡片渲染"]
E --> F["实时预览"]
E --> G["PNG 校验与 ZIP 打包"]
G --> H["本地下载"]
| 层级 | 技术 | 责任 |
|---|---|---|
| 应用 | Vite、Preact、TypeScript | 静态应用与交互 |
| 解析 | unified、remark-parse、remark-gfm、remark-math | Markdown AST 与数学语法 |
| 公式与代码 | KaTeX、Prism | 公式、语法高亮 |
| 分页 | MeasureStage + DOM 高度 |
基于真实卡片尺寸的页面计划 |
| 本地资源 | File System Access API、目录选择器、Object URL | 图片路径解析与绑定 |
| 存储 | IndexedDB | 草稿、配置、图片 Blob、显式绑定 |
| 导出 | html-to-image、fflate | PNG 生成、校验与 ZIP 打包 |
| 交付 | GitHub Pages、GitHub Actions | 静态部署 |
parser 只处理内容结构，layout 只生成分页计划，renderer 是唯一生成卡片 DOM 的位置，export 只导出已渲染卡片，app 负责界面和状态编排。这让预览与导出避免各自重新解析、重新分页。
md2card/
├── .github/workflows/ # 测试、构建与 GitHub Pages 部署
├── app/ # /app/ 工作台入口
├── examples/ # 可直接导入的 Markdown 与本地图片
├── public/ # favicon、OG 封面、robots、sitemap
├── src/
│ ├── app/ # 状态与交互编排
│ ├── data/ # 首次打开工作台时的示例内容
│ ├── domain/ # 文档、分页和排版类型
│ ├── export/ # PNG、校验、ZIP 下载
│ ├── layout/ # DOM 测量与分页规则
│ ├── parser/ # Markdown 解析与规范化
│ ├── renderer/ # 卡片、封面和富文本渲染
│ ├── resources/ # 本地图片索引、绑定与状态
│ ├── storage/ # IndexedDB 草稿仓储
│ └── styles/ # 工作台、网站与卡片主题样式
└── tests/ # 解析、分页和资源绑定回归测试
仓库自带 GitHub Pages 部署工作流。推送到 main 时会使用 Node.js 22，依次安装依赖、运行测试、构建 dist/ 并部署。首次部署时，在仓库 Settings → Pages 将 Source 设为 GitHub Actions。
Vite 使用相对资源路径，因此同一份构建产物可部署到 GitHub Pages 项目路径、其他静态托管服务或任意本地 HTTP 服务器，无需为仓库名修改基址。站点地图只收录产品首页，工作台声明为 noindex。
当前测试覆盖 GFM 表格分隔线、数学公式、超高表格和代码续页、标题簇与页尾安全区、封面与页码、本地图片相对路径绑定及同名冲突等场景。修改分页、公式、导出或资源逻辑后，至少运行：
npm test
npm run build视觉改动还应使用 完整样例，在 Chrome / Edge 中人工检查表格、长公式、多级标题、代码和三张本地图片的预览与导出。
本项目采用 MIT License。代码可自由使用、修改、分发和商业化，但须保留版权声明与许可证文本。项目名称、Logo 与展示素材不自动授予商标或品牌使用权。