MDCard：Markdown 秒变精美卡片

你写了一篇 Markdown，排版干净、逻辑清晰。想发小红书？得截图。想发朋友圈？得排版。想发给朋友看？格式全乱。

MDCard 就是来解决这个问题的：把 Markdown 一键变成精美的分享卡片图片。

一句话介绍

MDCard 是一个开源的 Web 工具，在左侧输入 Markdown，在右侧实时预览卡片效果，点击导出即可下载 PNG/JPG 图片。全程在浏览器本地完成，无需注册、无需上传、无需后端。

在线体验：mdcard.rouguang.top

16 款配色，一键切换

MDCard 内置了 16 款精选配色主题，8 款深色、8 款浅色，每款都有自己的气质：

深色系：靛夜、深空、极光、琥珀、赤焰、松烟、碧落、紫檀——适合技术博客、深夜思考、代码笔记。

浅色系：霜白、米宣、薄荷、浅堇、蜜桃、晴空、暮橙、铅灰——适合读书笔记、观点卡片、轻量分享。

点一下色块就能切换，背景色、标题色、正文字体色同步变化。侧边栏展开后的每个色块都是一个即时预览的调色板——你不用想象效果，直接看一眼色块的颜色分布就够了。

四种画幅，适配全平台

一张好卡片的画幅决定了它适合发在哪里。MDCard 提供了四种常见比例：

画幅	比例	适用场景
竖版	3:4	小红书图文、知识卡片
长图	9:16	朋友圈、公众号长图
方形	1:1	社交平台帖子、GitHub 简介
宽屏	16:9	演讲配图、封面图

切换画幅后，预览区的卡片尺寸随之改变，分页也会自动重新计算。

智能分页，不截断文字

写了一篇长 Markdown？MDCard 会自动帮你分页。

分页算法的核心原则很简单：在行边界切割。它会逐字测量渲染高度，找到当前页面容量内最后一行完整的文字作为切割点，绝不让你看到半行字。

如果你需要手动分页——比如某个章节必须从新一页开始——在 Markdown 中输入三个横杠 --- 独占一行，就是一次强制分页。

导出时，1~2 张图片逐个下载，3 张及以上自动打包为 ZIP 压缩包。不需要自己一张张点，也不用担心漏掉。

排版细节，尽在掌控

点击工具栏的「样式」按钮，右侧会滑出一个完整的设置面板。你可以调整：

• 标题字号：H1 / H2 / H3 各三级独立控制
• 正文字号与行高：影响阅读密度
• 内边距：控制文字与卡片边缘的距离
• 段落间距：段与段之间的留白大小
• 边框宽度、颜色、圆角：从零边框到醒目外框，从直角到圆角
• 水印：输入文字即可在每张卡片右下角显示，留空则不显示

每个滑块调整后，预览区实时反馈。所见即所得，不用猜。

毛玻璃界面：工具也可以很好看

MDCard 的 UI 采用了 Glassmorphism（毛玻璃）设计风格，半透明面板、柔和阴影、模糊背景层叠——这种现代、轻盈的视觉语言本身就是一种享受。

右上角提供了三种外观模式：

• 深色模式：配合深色系主题使用，沉浸感更强
• 浅色模式：为浅色系主题准备的明亮界面
• 跟随系统：按你的系统偏好自动切换

选择会记住（存在 localStorage 中），下次打开不用重设。

一键分享你的配置

当你调整出了一套满意的配色和排版组合，想让别人看到同样的效果，怎么办？

MDCard 设计了配置分享功能：点击设置面板中的「分享配置」按钮，所有样式参数（配色、字号、行高、间距、边框、水印）会被编码为 URL hash，生成一个特殊链接。把这个链接发给别人，对方打开就能复现完全相同的面板样式。

这在协作中特别实用：团队共用一套视觉规范时，一个人调好，扔个链接就够了。

它是开源的

MDCard 采用 MIT 许可证，代码托管在 GitHub，完全开源。

这意味着：

• 你可以免费使用：没有付费墙，没有高级功能限制，所有功能全部开放。
• 你可以查看源码：想知道分页算法怎么写的？渲染引擎用了什么方案？代码全在仓库里。
• 你可以自己部署：不想用在线版？Git clone 下来，npm install && npm run build，产物丢到任意静态服务器即可。
• 你可以参与贡献：发现 bug 或者有新想法，提 Issue 或 PR，一起把它做得更好。

技术栈一览

整个项目结构轻量清晰，没有框架依赖，全是原生 JavaScript + CSS：

技术	用途
Vite	构建工具，开发热更新
marked	Markdown 解析为 HTML
html2canvas	将 DOM 渲染为 Canvas 再导出图片
JSZip	多张图片自动打包 ZIP

图片导出方面，没有使用 canvas 内置方案，转而采用 html2canvas 来控制渲染端口——这保证了图片导出的高度可预期性。

源码结构清晰：

src/
├── index.html          # 入口页面
├── styles/main.css     # 全局样式 + 主题变量
└── app/
    ├── main.js         # 应用入口，事件绑定
    ├── config.js       # 画幅配置 & 默认值
    ├── palettes.js     # 16 款配色数据
    ├── settings.js     # 设置读写 & CSS 变量映射
    ├── paginator.js    # 分页算法核心
    ├── renderer.js     # 图片渲染 & 下载
    └── toast.js        # Toast 通知

想学习前端实战的同学，这是一个很好的阅读项目——体积小、逻辑直、没有框架的干扰，你能清楚看到从 Markdown 文本到导出图片的每一个环节。

最后

如果你经常写 Markdown，又需要频繁分享内容到社交平台，MDCard 值得放进你的工具箱。

所有功能免费，代码开放。试试看：mdcard.rouguang.top

---

作者：揉光入野 GitHub：github.com/rouguangruye/MDCard