悦省

Markdown 预览

左边写,右边实时渲染。写 README、写说明文档都够用。

渲染引擎

用 marked 在本地渲染。图片、链接点击会跳转,但不会加载任何分析脚本。如果你要把 HTML 贴进别的系统,记得自己再过滤一次样式。

什么时候用

  • 把 Markdown 贴进工单、README 或 CMS 之前,想先确认表格、围栏代码块、任务列表实际渲染成什么样时。
  • 需要把一段 Markdown 变成 HTML 片段贴进静态页面或邮件模板,要复制渲染后的 HTML 而不是源码时。

什么时候不用

  • 需要和 GitHub 完全一致的输出(标题锚点、脚注、数学公式、Mermaid 图):本页是 marked 的 GFM 模式,不带这些扩展。
  • Markdown 来自不可信来源(用户提交、别人的 README):原始 HTML 不会被过滤,会直接渲染进预览页。
限制与隐私

渲染在本地完成,Markdown 不会上传;marked 用本站资源,不连 CDN。限制:只做 Markdown→HTML 转换,不做 XSS 过滤和语法检查;不支持脚注、公式、Mermaid;图片按 URL 由浏览器直接请求对方站点。

常见问题

为什么这里单个换行就生效,GitHub 上却不换行?

预览开了 marked 的 breaks:true,段落内的每个换行都会变成 <br>;GitHub 和标准 CommonMark 只在行尾有两个空格或出现空行时才换行。所以「复制 HTML」得到的片段里会带 <br>,贴到按 CommonMark 渲染的系统时,这些换行会保留下来,段落间距和原稿不一样。

复制出来的 HTML 能直接贴到自己页面吗?

它是预览区的 innerHTML:只有 h1、p、ul、table、pre/code、br 这类标签,没有本站 CSS,也没有 html/head 外壳,样式要自己补。marked 不做 XSS 过滤,Markdown 里的原生 HTML(script 标签、onerror 属性)会原样出现在结果里;用 innerHTML 插入的 script 不会执行,但事件属性、远程图片仍可能生效,只贴自己信得过的内容。

表格和任务列表怎么写才渲染?

都要 GFM 语法:表格第二行必须是 |---|---| 这样的分隔行,列数要和表头一致;任务列表写成 - [ ] 或 - [x],方括号内保留一个空格,会渲染成 disabled 的 checkbox。围栏代码块输出的是 pre+code(带 language-js 这样的 class),没有语法高亮,也不加载 highlight.js。