Markdown 预览器

在左侧输入内容,右侧即可实时查看 HTML 渲染效果。本预览器采用 GitHub 风格 Markdown:支持表格、任务列表、带语法高亮的围栏代码块、删除线、自动链接的 URL 以及内嵌 HTML。它非常适合在提交前起草 README、检查评论在 PR 上的显示效果,或通过实时观察每次按键的渲染结果来学习 Markdown 语法。

如何使用预览器

  1. 1

    编写 Markdown

    在左侧窗格输入原始 Markdown,每次修改都会立即重新渲染右侧窗格。

  2. 2

    查看 HTML 预览

    右侧窗格以 GitHub 风格显示渲染后的结果。

  3. 3

    切换模式

    左右并排、仅预览或仅源码,让写作更专注、不受干扰。

  4. 4

    复制 HTML

    获取渲染后的 HTML,粘贴到邮件客户端或内容管理系统(CMS)中。

本预览器支持的功能

  • **CommonMark:**标题、段落、强调、列表、引用块、代码块、链接、图片以及水平分割线。
  • **GFM 扩展:**支持列对齐的表格、任务列表(- [ ]- [x])、使用 ~~ 的删除线、自动链接的 URL,以及带语言提示的围栏代码块。
  • **语法高亮:**通过 highlight.js 支持 100 多种语言,JavaScript、Python、Go、Rust、SQL、YAML 等。
  • **原始 HTML:**内嵌 HTML 会直接传递(出于安全考虑会进行净化处理)。
  • **数学公式(可选):**启用数学扩展后,可渲染 $...$ 行内公式和 $$...$$ 块级公式。

不支持的功能

  • Obsidian 风格的自定义 wiki 链接[[Page]]),仅 Obsidian 支持。
  • Pandoc 围栏 div:::),仅 Pandoc 支持。
  • 服务器端包含{% ... %} 模板标签。

常见用途

  • **起草 README:**在 IDE 之外撰写,再粘贴最终版本。
  • **检查 PR 评论格式:**发布前先行确认,GitHub 的评论框无法正确预览代码围栏。
  • **将笔记转换为 HTML:**当你需要把带样式的内容粘贴到邮件或支持原始 HTML 的 CMS 时。
  • **教学 Markdown:**左右并排显示让语法结构一目了然。

性能

渲染使用带 GFM 插件的 Markdown-it 解析器,完全在浏览器中运行。几百 KB 的文档可在毫秒级完成渲染;而超大文件(把整本书放在单个文件里)在输入时可能出现卡顿,遇到这种情况,请将其拆分为章节。

导出

  • 复制 HTML 可获得包含渲染内容和样式类的 <div>
  • 下载 .md 可保存源文件。
  • 通过浏览器的打印对话框选择打印为 PDF,即可生成带样式的渲染视图 PDF 副本。

常见问题

GitHub 在 GFM 的基础上叠加了自己的 CSS。HTML 输出应当一致,样式(字体、间距)则是它们自己的。若要完全一致,请使用“在 GitHub 上渲染“的主题切换选项。

支持,只要启用数学扩展,行内 $...$ 和块级 $$...$$ 就会通过 KaTeX 渲染。为了减小页面体积,该功能默认关闭。

会进行净化,<div><span><table><img> 等安全标签可以通过,而 <script> 和内联事件处理程序会被移除。

数百 KB 的文档都能流畅运行。对于超大文件,请关闭实时渲染,改为按需渲染。

渲染完全在客户端完成,内容不会发送到任何地方。如果刷新页面,除非浏览器保留了表单状态,否则草稿会丢失。

相关工具

此工具还提供其他语言版本