⌘K 切换工具
TEXT

Markdown预览

编写Markdown并实时预览渲染效果。

local
markdown-preview

Rendered locally and sanitized with DOMPurify. Nothing is sent anywhere.

§01 关于此工具

概述

一个分栏 Markdown 编辑器:左栏输入,右栏立刻显示渲染结果。解析由 marked 完成, 每一次渲染都经过 DOMPurify 净化,因此内嵌的 HTML 无法向页面注入脚本。适合起草 README、确认一段片段的渲染效果,或者排查 Markdown 语法。

它解决的是一个很具体的麻烦:Markdown 的不少细节(列表嵌套、表格对齐、缩进代码块) 只有渲染出来才知道对不对,而在正式提交之前你通常看不到渲染结果。

使用方法

  1. Markdown 栏输入或粘贴内容——里面预置了一份很小的样例文档。
  2. 每次按键,Preview 栏都会跟着更新。
  3. 反复调整到满意为止,然后从左栏把源码复制走。

示例

  • **bold** and _italic_ → 预览里的粗体和斜体文本
  • `inline code` 和围栏代码块会以等宽字体渲染
  • [links](https://example.com)# headings- list items 分别渲染为可点击的链接、标题和无序列表

说明

预览只是最终外观的近似。GitHub、GitLab 和各类静态站点生成器各自套用自己的 CSS 和扩展, 因此间距和高级语法在目标平台上可能有出入。被 DOMPurify 判定为不安全的原始 HTML 会被静默地从预览里移除。两栏是同步的,所以定位问题的办法很直接: 一边删一边看,直到出问题的那一段暴露出来。

FAQ
我写的 Markdown 会被发送到服务器吗?
不会。渲染完全在浏览器内通过 marked 库完成,产生的 HTML 在显示之前会用 DOMPurify 净化。不做传输也不做存储。
预览来源不可信的 Markdown 安全吗?
渲染结果会经过 DOMPurify,脚本标签、事件处理属性以及其他危险 HTML 在进入页面之前就被剥离。不过对于不信任的内容,仍然不要去点里面的链接。
支持哪一种 Markdown 方言?
工具使用 marked,支持 CommonMark 以及围栏代码块、自动链接等常见的 GitHub 风格扩展。GitHub 任务列表复选框这类平台专属特性,渲染结果可能与 GitHub 本身不同。