
在 Web 开发中,写 HTML 是基本功;但在邮件开发中,写 HTML 是一场噩梦。
Outlook 使用 Microsoft Word 渲染引擎,Gmail 会无情剥离 <style> 标签,Yahoo 有独特的解析怪癖,而 Apple Mail 又过于自由。为了让一封简单的邮件在所有客户端(尤其是桌面版 Outlook)中正常显示,开发者不得不编写深层嵌套的表格 (<table>)、强制内联 CSS,并堆砌大量针对特定客户端的 Hack 代码。

Email.md 允许你直接使用熟悉的 Markdown 语法撰写邮件内容,然后自动将其转换为响应式、内联样式化、且兼容所有主流邮件客户端的安全 HTML。
核心价值:简单、兼容、AI 友好
1. 回归本质:只写 Markdown
你不再需要记忆哪些 CSS 属性在 Gmail 中有效,也不需要理解为什么 Outlook 不支持 div 布局。
- 输入:标准的 Markdown(标题、列表、链接、图片)。
- 输出:经过深度优化、表格化布局、样式内联的完整 HTML 邮件。
- 效率:将原本需要数小时的邮件模板开发时间缩短至几分钟。
2. 全客户端兼容 (Client-Agnostic)
Email.md 内置了针对主流邮件客户端的适配规则,确保你的邮件在以下平台完美渲染:
- ✅ Gmail (Web, iOS, Android)
- ✅ Outlook (Windows Desktop, Web, Mac)
- ✅ Apple Mail
- ✅ Yahoo Mail
- ✅ Thunderbird 及其他
它自动处理了“样式内联化”、“表格布局转换”和“客户端前缀”等繁琐工作,覆盖了 80% 以上 的常规邮件设计需求。
3. AI 的原生搭档
这是 Email.md 最强大的隐性优势。大型语言模型 (LLM) 非常擅长写 Markdown,但不擅长写邮件 HTML。
- 以前:你让 AI 写一封邮件 HTML,它生成的代码往往在 Outlook 中崩坏,你需要人工修复。
- 现在:你让 AI 写一封 Email.md 格式的邮件,它能瞬间生成完美结构。你只需调用
render()函数,即可得到生产级代码。 - 工作流:
提示词->AI 生成 Markdown->Email.md 转换->发送。
快速上手
安装
npm install emailmd
基础用法
只需几行代码,即可将 Markdown 转换为包含 text/html 和 text/plain 双版本的邮件内容:
import { render } from "emailmd";
const content = `
# 欢迎加入!👋
感谢注册 **Email.md**。我们很高兴有你加入。
### 接下来做什么?
1. 验证你的邮箱
2. 完善个人资料
3. 探索功能
[立即开始](https://example.com/start){button}
> "简单,才是终极的复杂。"
祝好,
The Team
`;
const { html, text } = render(content);
// html: 完整的、内联样式的、表格布局的邮件安全 HTML
// text: 自动生成的纯文本版本,用于兼容性 fallback
高级特性:按钮与组件
Email.md 扩展了 Markdown 语法,支持常见的邮件组件。例如,给链接添加 {button} 后缀,它会自动渲染为兼容 Outlook 的 VML 按钮或表格按钮:
[点击这里购买]{button .primary}
[稍后提醒我]{button .secondary}
典型应用场景
| 场景 | 传统痛点 | Email.md 解决方案 |
|---|---|---|
| 事务性邮件 | 每次改文案都要动复杂的 HTML 结构 | 直接修改 Markdown 文本,逻辑与样式分离,维护极简。 |
| 营销通讯 (EDM) | 设计师给的 Figma 转 HTML 成本极高 | 运营人员直接用 Markdown 撰写,AI 辅助排版,即时预览发送。 |
| AI 自动生成 | AI 生成的 HTML 兼容性差,需人工修复 | AI 生成 Markdown,Email.md 保证输出兼容性,实现全自动流程。 |
| 多语言邮件 | 每种语言都要维护一套 HTML 模板 | 只需维护多套 Markdown 内容,共用同一套渲染逻辑。 |
技术原理
Email.md 在底层执行了复杂的转换管道:
- Markdown 解析:将 Markdown 转换为 AST (抽象语法树)。
- 语义映射:将 AST 节点映射为邮件安全的 HTML 结构(主要是
<table>,<tr>,<td>)。 - 样式内联:将所有 CSS 样式强制写入标签的
style属性(因为 Gmail 等会丢弃<head>中的样式)。 - 客户端修复:针对 Outlook 添加 VML 代码以支持圆角按钮和背景图,针对 Gmail 添加特定的元数据标签。
- 纯文本生成:同步生成一份干净的纯文本版本,确保在不支持 HTML 的客户端中也能阅读。
数据统计
相关导航


JustHTMLs

Compare2Word

电子书转思维导图

TypeWords

PaperStudio

FastDo






