📝 Markdown 转 HTML
实时渲染Markdown，支持GFM表格、任务列表、代码块，一键复制HTML
什么是 Markdown 转 HTML 工具？
Markdown 转 HTML 工具是一款将 Markdown 格式文本转换为标准 HTML 代码的在线转换器。Markdown 是一种轻量级标记语言，使用简洁的符号（如 # 表示标题、** 表示加粗）来描述文本格式。但在浏览器中渲染网页时，必须使用 HTML 标签。因此，在发布 Markdown 内容到网站、邮件模板或 CMS 系统时，需要将其转换为 HTML。本工具支持完整的 CommonMark 规范以及 GitHub Flavored Markdown 扩展语法，能够准确转换标题、段落、列表、代码块、表格、图片、链接等所有常见元素，并支持自定义 CSS 样式注入，满足不同发布场景的需求。
如何使用 Markdown 转 HTML
- 步骤一：粘贴 Markdown 内容 — 将你的 Markdown 文本粘贴到左侧输入框中，工具支持任意长度的文本输入，可以是从几行到数千字的完整文档。
- 步骤二：配置转换选项 — 根据需要选择是否启用 GFM 扩展、是否添加代码高亮样式、是否自动生成目录（TOC）等选项，定制化输出结果。
- 步骤三：获取 HTML 输出 — 转换结果实时显示在右侧，可以直接复制 HTML 代码，也可以下载为 .html 文件。代码经过格式化，结构清晰，方便二次编辑。
常见使用场景
场景一：将博客文章发布到 CMS
很多技术博主使用 Markdown 写作，但 WordPress、Typecho 等 CMS 系统需要 HTML 格式。使用此工具转换后，可以直接粘贴到编辑器的 HTML 模式中发布，保留完整的排版格式。
场景二：生成邮件模板内容
HTML 邮件的编写非常繁琐，使用 Markdown 写内容再转换为 HTML，可以大幅简化邮件模板的开发流程。转换后的 HTML 兼容主流邮件客户端，确保收件人看到正确的排版效果。
场景三：文档系统内容迁移
将 Git 仓库中的 Markdown 文档迁移到 Confluence、语雀等文档平台时，需要批量转换为 HTML 格式。此工具支持大文档转换，配合 API 调用可实现自动化迁移。
技术原理
Markdown 到 HTML 的转换过程包含词法分析（Lexing）和语法转换（Transform）两个阶段。词法分析器将原始文本拆分为 Token 序列（如标题标记、段落文本、代码块标记等），转换器遍历 Token 树并将每个节点映射为对应的 HTML 标签。主流的 JavaScript 解析器包括 marked、markdown-it 和 remark，它们都遵循 CommonMark 规范，但在扩展语法和性能上各有特点。
// 使用 marked 库的转换示例
const html = marked.parse(`# 标题
这是一段 **加粗** 的文字。
- 列表项一
- 列表项二`);
console.log(html);
// 输出: <h1>标题</h1><p>这是一段 <strong>加粗</strong> 的文字。</p>...最佳实践与注意事项
- 转换前检查 Markdown 语法的正确性，特别是嵌套列表和表格的对齐，语法错误可能导致转换结果异常。
- 代码块中务必指定编程语言标识，以确保语法高亮样式正确应用。
- 转换后的 HTML 建议通过 W3C 验证器检查，确保标签闭合正确、属性格式规范。
- 对于包含特殊字符的内容，确认转义处理正确，避免 XSS 安全风险。
常见问题
Q：转换后的 HTML 代码是否经过美化格式化？
A：是的。默认输出的 HTML 代码会进行缩进美化，每个标签独占一行，层级关系清晰。如果需要压缩后的单行 HTML（用于减小文件体积），可以切换到压缩模式。
Q：支持数学公式和图表的转换吗？
A：支持 GitHub Flavored Markdown 中的基本扩展。对于 LaTeX 数学公式，需要启用 MathJax/KaTeX 支持；对于 Mermaid 图表，转换后会保留 Mermaid 语法，需要在目标页面引入 Mermaid.js 渲染。
Q：转换结果中的链接会自动添加 target="_blank" 吗？
A：默认不会。如果你需要所有外链在新窗口打开，可以在转换选项中启用"外链新窗口打开"功能，工具会自动为 http/https 链接添加 target="_blank" 和 rel="noopener" 属性。
Q：批量转换多个 Markdown 文件怎么操作？
A：本工具目前支持单文件转换。如需批量处理，建议下载工具源码在本地使用 Node.js 脚本批量转换，或使用我们的 API 接口进行自动化处理。
Q：为什么有些 Markdown 语法没有被正确转换？
A：请检查是否使用了特定平台的扩展语法（如 VuePress 的容器语法）。本工具遵循 CommonMark + GFM 标准，不支持非标准的平台特有语法。建议统一使用标准语法以确保兼容性。
常见问题
| 列1 | 列2 | 列3 |
| --- | --- | --- |
| 内容1 | 内容2 | 内容3 |第一行是表头，第二行定义对齐方式（:--左对齐，:--:居中，--:右对齐）。
- [x] 已完成任务
- [ ] 未完成任务勾选GFM任务列表选项即可渲染为可交互的复选框样式。
```javascript
const hello = 'world';
```支持 javascript, python, html, css, json, bash 等常用语言。