开发编码 本地计算 开箱即用 内置示例 不留痕迹

Markdown 转 HTML

输入 Markdown 源码，同时得到 HTML 源码与渲染预览。支持标题、粗斜体、删除线、行内代码、代码块、有序无序列表、引用、分隔线、表格、链接与图片，也认反斜杠转义。输出前全部转义并做链接与图片协议白名单，javascript: 等危险协议自动退化为纯文本。

Markdown 用少量符号表达标题、列表、链接与强调，是写文档、README 与技术稿件最常用的轻量格式，但网页最终要渲染成 HTML。这个工具把 Markdown 源码转成 HTML，同时给出渲染预览，方便粘进博客系统、CMS 模板或静态站点。

安全是这类转换器最容易出问题的地方：把用户输入直接拼进 HTML 会带来 XSS 风险，因此本工具先对内容做 HTML 转义、再按白名单生成标签，链接只放行 http、https 与相对路径，javascript: 这类危险协议退化为纯文本。此外各平台的 Markdown 方言略有差异（表格、脚注、公式支持程度不同），迁移时以目标平台为准。

—

使用步骤

  1. 粘贴或输入 Markdown 源码，点「转换」；示例按钮可一键填入常用语法。
  2. 查看两份结果：HTML 源码（可复制进项目）与渲染预览（确认最终效果）。
  3. 表格用竖线分隔、第二行写 :--- 控制对齐；代码块用三个反引号包裹。
  4. 若某条链接显示为纯文本，说明它的协议不在白名单内，这是安全策略而非转换失败。

计算原理与示例

支持的语法

支持常用子集：# 到 ###### 标题、**粗体**、*斜体*、~~删除线~~、`行内代码`、``` 围栏代码块、- 无序列表、1. 有序列表、> 引用、--- 分隔线、| 表格（含 :--- 对齐语法）、[文字](链接)、![替代文字](图片地址)，以及反斜杠转义（\* 输出字面的星号，用来写「不是斜体」的内容）。

双输出设计

转换后同时给出两份结果：HTML 源码（等宽字体展示，可一键复制进项目）与渲染预览（所见即所得效果）。修改源码后点「转换」刷新，示例按钮可一键填入典型语法。

防注入机制

防注入分两层：所有文本内容先做 HTML 转义（< > & 引号），再按白名单生成标签，所以 <script> 之类内容只会以文字形式出现；链接 href 只放行 http/https/相对路径，javascript: 等协议整段退化为纯文本。

代码示例

JavaScript 用 marked 与 DOMPurify 转换 

import { marked } from 'marked';
import DOMPurify from 'dompurify';

// 先转 HTML，再净化（顺序不能反）
const html = DOMPurify.sanitize(marked.parse(md), {
  ALLOWED_URI_REGEXP: /^(?:https?|mailto):|^\//i,
});

document.querySelector('.preview').innerHTML = html;

Shell 命令行转换 

# Pandoc：Markdown → HTML 片段（-f gfm 按 GitHub 方言解析）
pandoc -f gfm -t html --no-highlight in.md -o out.html

# Python 的 markdown 包（标准库不含 Markdown）
python3 -m pip install markdown
python3 -c "import markdown; print(markdown.markdown(open('in.md', encoding='utf-8').read()))"

常见问题

支持哪些 Markdown 语法？

覆盖最常用的核心子集：六级标题、段落、粗体斜体删除线、行内代码与围栏代码块、有序无序列表、引用、分隔线、表格（含左中右对齐）、链接、图片，以及反斜杠转义。脚注、任务列表、定义列表等扩展语法暂不支持，会按普通文字处理；嵌套列表也会拍平成一层的同级项。

图片写法有什么限制？

图片地址与链接走同一套白名单：只放行 http、https 与相对路径（/ 或 ./ 开头）。写成 ![图](javascript:alert(1)) 不会生成 img 标签，而是原样显示成文字，避免把危险协议塞进 src。地址里带查询串（?a=1&b=2）可以正常使用。

输出的 HTML 安全吗（XSS）？

安全。工具先把所有输入文本整体转义（< 变 &lt; 等），再按白名单生成标签，因此 <script>alert(1)</script> 这类内容只会显示为文字，不会被当成脚本执行。这也是引擎测试专门覆盖的用例。

链接为什么有的能点有的不能？

href 只放行 http://、https:// 和相对路径（/、./、#）。javascript:、data: 等协议是常见 XSS 载体，遇到时整段退化为纯文本（保留原文），防止把不可信 Markdown 渲染进页面时被注入脚本。

表格对齐怎么写？

分隔行用冒号控制对齐：|---| 左对齐、|:---:| 居中、|---:| 右对齐。表头单元格会带上对应的 text-align 样式，表体行按表头列数对齐，多出的列会被截断。

预览和真实网站渲染一致吗？

预览用的就是工具输出的 HTML，样式（字号行距）与目标网站可能不同，但标签结构完全一致。把 HTML 源码复制进项目后，由目标站点的 CSS 决定最终观感。

换行会变成 <br> 吗？

段落内的单个换行会转成 <br>（类 GitHub 行为），空行分隔段落。列表、引用、代码块内部保持各自规则：代码块内换行原样保留，列表项之间不需要空行。

转换在本地进行吗？

是。解析与渲染全部在浏览器里由内置引擎完成，内容不经过任何服务器，断网可用。可以放心粘贴未发布的文档草稿。

延伸阅读

来自本站原创文章，讲清这个工具背后的算法与口径。