Markdown 预览

编写 Markdown 并在旁边实时预览 HTML:支持 GitHub 风格的表格、任务列表和删除线。可复制净化后的 HTML 或下载 .html 文件。

输入内容和文件始终留在浏览器中

在此编写或粘贴 Markdown,或加载示例。

预览

输入时,渲染后的预览将显示在这里。

本页内容

在一侧输入 Markdown,另一侧实时显示渲染结果——适合起草 README、issue 评论、文档和发布说明,然后导出为 HTML。

详细功能

渲染使用 marked 库并启用 GitHub Flavored Markdown:表格、任务列表 - [x]、删除线 ~~text~~、围栏代码块以及裸 URL 自动链接。与 GitHub 评论一样,单个换行会变成 <br>,因此多行不会被合并成一段。代码块以等宽字体显示,不进行语法着色。

Markdown 中的原始 HTML 会被净化:脚本、iframe、表单、样式以及 onclick 这类事件属性会被移除,javascript: 链接会被拦截,而 <kbd>、<details>、<sub> 等无害标签会保留。链接在新标签页中打开。预览中的标题会降低一级显示,以免与页面标题冲突;复制 HTML 和 下载 HTML 保留原始的 <h1>–<h6>。

工具栏可在光标处插入粗体、斜体、标题、链接、图片、行内代码和列表语法,同步滚动 让两个窗格保持在相同的相对位置。一切都在浏览器中运行,工具不会保存您的文本——关闭页面前请先复制。

实用示例

任务列表:- [x] tests 和 - [ ] docs 渲染为一个已勾选和一个未勾选的复选框。

换行:两行 line one 和 line two ~~old~~ 变成 <p>line one<br>line two <del>old</del></p>。

表格:| A | B |、|---|---|、| 1 | 2 | 三行变成带表头行的 HTML 表格。

不安全的 HTML:<script>alert(1)</script><b onclick=x>hi</b> 导出后只剩 <b>hi</b>。

如何使用此工具

  1. 编写 Markdown

    在 Markdown 编辑器 中输入。首次打开时会显示示例文档;点击 清除 从空白页开始。

  2. 用工具栏设置格式

    选中文本,使用格式按钮(粗体、斜体、标题、链接、图片、代码、列表)插入相应语法。

  3. 检查预览

    预览 窗格随每次按键更新;开启 同步滚动 可让两个窗格一起滚动。

  4. 导出

    使用 复制 HTML 或 复制 Markdown,或点击 下载 HTML 保存带基础样式的 markdown-preview.html。

提示和最佳实践

  • 这里无法解析 img/logo.png 这样的相对图片路径;请使用完整的 https:// 地址来显示图片。
  • 其他网站的图片由浏览器直接从对应服务器加载。
  • GitHub 专有的扩展——@mentions、:smile: 这类表情短代码、Mermaid 图表和数学公式——会显示为纯文本。
  • 可以使用 <kbd>Ctrl</kbd> 或 <details> 等行内 HTML,但 style 和 class 属性会被移除。
  • 下载的文件是使用浅色样式的独立页面,可直接打印或作为附件发送。