Markdown 在线预览：实时渲染、复制 HTML 片段
在左边输入 Markdown，右边立刻显示渲染结果；写完后可以复制渲染出的 HTML 片段，贴进静态页面、邮件模板或 CMS，也可以复制原始 Markdown。渲染用 marked 在浏览器本地完成，内容不会上传。
什么时候需要一个预览器
Markdown 写起来简单，但表格、任务列表、围栏代码块这些 GFM 扩展，只有渲染后才知道有没有写对。贴进 README、工单或 CMS 之前先看一眼，比发布后再回来修省事。
另一类需求是把 Markdown 转成 HTML 片段。比如往静态站点里插一段说明、给邮件模板加一段排版好的内容，需要的是 HTML 而不是 Markdown 源码。
- 发布 README、文档或工单前，确认表格和代码块渲染正常
- 把 Markdown 转成 HTML 片段贴进静态页面
- 给非技术同事看排版效果，而不是让他们读源码
- 检查从别处复制来的 Markdown 有没有语法问题
渲染行为和容易踩的坑
预览开启了 marked 的 breaks 选项，段落内单个换行就会变成 <br>。GitHub 和标准 CommonMark 要求行尾两个空格或一个空行才换行，所以同一份 Markdown 在两边看起来会不一样；复制出的 HTML 会带着这些 <br>，贴到 CommonMark 系统里会保留下来。
表格必须用 GFM 语法：第二行是 |---|---| 这样的分隔行，列数和表头一致。任务列表写 - [ ] 或 - [x]，方括号里保留一个空格。围栏代码块输出 pre 加 code，带 language-js 之类的 class，但没有语法高亮。
- 复制 HTML 得到的是预览区的 innerHTML，不含本站 CSS，样式要自己补
- marked 不做 XSS 过滤，原生 HTML 会原样进入结果，只贴可信内容
- 图片按 URL 由浏览器直接请求对方站点，不会经过代理
- 需要脚注、公式、Mermaid 图时，这个预览器不支持
替代方案
要 GitHub 完全一致的渲染（标题锚点、脚注、数学公式、Mermaid），用 GitHub 本身或 pandoc；要发布整站，用静态站点生成器；要在服务端渲染不可信内容，必须加 HTML sanitizer，比如 DOMPurify。
如果只是要提取纯文本或做批量转换，命令行工具比手工复制更可靠。这个预览器的定位是「写的时候看一眼」，不是发布流水线的一环。
- GitHub 一致性：GitHub 预览或 pandoc
- 整站发布：静态站点生成器（Hugo、Eleventy、Astro 等）
- 不可信内容：服务端渲染加 sanitizer
- 批量转换：命令行 Markdown 处理器
常见问题
为什么这里单个换行就生效，GitHub 上却不换行？
预览开启了 marked 的 breaks 选项，段落内每个换行都会变成 <br>。GitHub 和标准 CommonMark 只在行尾有两个空格或出现空行时才换行。所以同一份 Markdown，这里看起来分行更勤；复制出的 HTML 带到 CommonMark 环境时，这些 <br> 会保留，段落间距和原稿不一致。
复制出来的 HTML 能直接贴到自己网页吗？
可以贴，但要自己补样式。复制的是预览区的 innerHTML，只有 h1、p、ul、table、pre、code、br 这类标签，没有 CSS，也没有 html/head 外壳。另外 marked 不做 XSS 过滤，Markdown 里的原生 HTML（script 标签、onerror 属性）会原样出现在结果里，只贴自己信得过的内容。
表格和任务列表为什么不渲染？
多半是语法不完整。表格需要第二行的分隔行，例如 |---|---|，而且列数要和表头一致；分隔行少了或列数不匹配，整块会被当成普通段落。任务列表要写成 - [ ] 或 - [x]，方括号内保留一个空格，缺空格就只是普通列表项。
相关工具：Markdown 预览