为什么 Markdown 导出 HTML 很难做好？
Markdown 是写作的理想格式——纯文本、版本友好、专注内容。但当你需要分享文章时，问题来了：直接发 .md 文件，对方需要安装 Markdown 查看器；转成 PDF，印刷感太重，在手机上阅读体验糟糕；复制到富文本编辑器，格式又往往乱掉。
导出 HTML 是最自然的选择——浏览器原生支持，任何设备都能打开。但”能打开”和”好看”之间差着很远：裸 HTML 没有样式，代码块黑白一片，暗色模式要么完全缺失，要么需要手动维护一份 CSS。
什么是”精美 HTML”？
一份高质量的 Markdown → HTML 导出，应当满足以下标准：
- 单文件——所有样式内联，不依赖外部 CSS/JS/字体，可以直接发给别人或托管到任意静态服务器
- 内置暗色模式——通过
@media (prefers-color-scheme: dark)自动跟随系统，无需 JS - 主题化代码块——语法高亮颜色与整体配色协调，而不是用一套通用的黑色背景
- 排版精良——合适的行距、字号、字体栈、段落间距；表格、引用块、数学公式都有对应样式
- 内容宽度可控——不铺满整个浏览器宽度，保持舒适的阅读列宽（通常 65–80 字符）
Design Token 驱动的主题系统
Mark.build 使用 Design Token 作为主题的核心架构。所有视觉属性——文字颜色、背景色、代码块背景、强调色、圆角、字体——都通过 Token 统一管理，而不是散落在各处的硬编码值。
Token 分三层：
- Primitive（原始值）——颜色色阶（
blue.600、gray.100）、字体名称、字号 - Semantic（语义化）——
text-primary、bg-surface、accent，同时定义亮色和暗色两套值 - Component（组件级）——
code-block.bg、table.header-bg，从 Semantic 自动派生
当你切换主题时，所有元素——标题、段落、代码块、Mermaid 图表、KaTeX 公式、表格——都从同一套 Token 获取样式，瞬间同步更新。代码块的高亮方案也随主题切换，而不是固定用一种配色。
用 Mark.build 导出 HTML：分步指南
第一步：打开编辑器
访问 mark.build/editor。编辑器基于 CodeMirror 6，支持语法高亮、快捷键（⌘B 加粗、⌘I 斜体、⌘K 链接）和滚动同步预览。所有文档保存在浏览器本地，不上传服务器。
第二步：选择主题
点击工具栏中的主题选择器，从内置主题中选择：
- Default——干净的蓝色强调色，适合技术文档
- Tech Blog——紫色强调色 + 深色代码块，Dracula 风格
- Academic——衬线标题字体，适合论文和长文
- Minimal——极简灰色系，减少视觉干扰
- Magazine——红色强调色 + Playfair Display 标题，杂志风格
用工具栏的日/月图标切换亮色和暗色模式，预览效果。
第三步：导出 HTML
点击右上角的「导出」按钮，选择「导出 HTML」。导出的文件是一个完全自包含的 .html 文件：
- 所有 CSS 内联在
<style>标签中，包括 KaTeX 公式渲染所需的最小化样式 - 亮色和暗色两套 CSS 变量都写入文件，通过
@media (prefers-color-scheme: dark)自动切换 - Mermaid 图表导出为内联 SVG，不依赖外部运行时
导出其他格式
除了 HTML，Mark.build 还支持：
- PDF——调用浏览器打印对话框，仅亮色模式，适合干净可打印的文档
- PNG——以 2 倍像素比截取预览区，适合社交媒体分享
- 富文本复制——将带样式的 HTML 复制到剪贴板，可直接粘贴到微信公众号、Notion、邮件客户端
HTML 导出的典型使用场景
- 技术文档发布到个人网站或公司内网，不需要搭建 CMS
- 发给客户或同事的技术报告，一个文件搞定，无需任何软件
- 在邮件中附上 HTML 文件，对方直接用浏览器打开
- 上传到 GitHub Pages 或 Cloudflare Pages，几秒内变成可访问的网页
- 作为简历或作品集的单页展示，样式精美，暗色模式自动适配
小结
Markdown 写作的终点不应该是一个样式混乱的 HTML 文件。Design Token 驱动的主题系统让每一个导出的文件都具备完整的排版体系——而不仅仅是”能看”。
Mark.build 的目标是让这个过程尽可能简单：写 Markdown，选主题，点导出。剩下的事情，交给工具。
立即体验： 打开编辑器 →