MDUtil

Markdown 转 HTML

粘贴 Markdown，得到可以直接放进网站、博客或邮件模板的 HTML 代码，也可以下载能在浏览器里直接打开的完整网页，内容不会上传。

Markdown

377 个字符28 行
<h1 id="快速上手">快速上手</h1>
<p>安装后在需要的地方引入即可。所有选项见<a href="https://example.com/docs">完整文档</a>。</p>
<h2 id="安装">安装</h2>
<pre><code class="language-bash">npm install field-notes
</code></pre>
<h2 id="选项">选项</h2>
<table>
<thead>
<tr>
<th align="left">选项</th>
<th align="center">默认值</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>sync</code></td>
<td align="center"><code>true</code></td>
<td align="left">联网时上传记录</td>
</tr>
<tr>
<td align="left"><code>quality</code></td>
<td align="center"><code>0.8</code></td>
<td align="left">照片的 JPEG 质量</td>
</tr>
</tbody>
</table>
<h2 id="待办">待办</h2>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" checked disabled> 注册账号</li>
<li class="task-list-item"><input type="checkbox" disabled> 邀请团队成员</li>
</ul>
<p>按 <kbd>Ctrl</kbd> + <kbd>S</kbd> 保存。一天的记录大约占用 <span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi><mo>×</mo><mn>2.5</mn></mrow><annotation encoding="application/x-tex">n \times 2.5</annotation></semantics></math></span> MB。<sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="user-content-footnote-label">1</a></sup></p>
<blockquote>
<p><strong>注意：</strong> 同步之前，记录只保存在设备上。</p>
</blockquote>
<section data-footnotes="" class="footnotes"><h2 class="sr-only" id="user-content-footnote-label">Footnotes</h2>
<ol>
<li id="user-content-fn-1">
<p>按默认质量拍摄 <span class="katex"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>n</mi></mrow><annotation encoding="application/x-tex">n</annotation></semantics></math></span> 张照片计算。 <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>
</li>
</ol>
</section>
1792 个字符

能处理什么

干净的语义化 HTML
标题、列表、带 align 的表格、<pre><code class="language-js"> 代码块和脚注，没有多余的包装元素和内联样式。
默认安全
Markdown 里写的 HTML 会保留，<script>、onclick 这类事件属性和 javascript: 链接会被去掉。
GitHub 风格 Markdown
表格、任务列表、删除线、自动链接和脚注的转换结果和 GitHub 显示的一致。
公式不依赖脚本
公式可以输出为浏览器直接显示的 MathML，也可以输出为 KaTeX HTML 并自动引入它的样式表。
标题锚点
标题带上 GitHub 风格的 id，例如 id="安装"，可以直接链接到每一节。
完整网页
完整网页包含 doctype、字符集、viewport 和标题，还可以加上跟随读者浅色或深色模式的样式表。

在代码里把 Markdown 转成 HTML

JavaScript

这个页面使用 unified 系列工具。Markdown 来自用户输入时，处理链里要保留 rehype-sanitize。

import rehypeSanitize from "rehype-sanitize";
import rehypeStringify from "rehype-stringify";
import remarkGfm from "remark-gfm";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";

const file = await unified()
  .use(remarkParse)
  .use(remarkGfm)
  .use(remarkRehype)
  .use(rehypeSanitize)
  .use(rehypeStringify)
  .process("# Hello, *world*!");

console.log(String(file)); // <h1>Hello, <em>world</em>!</h1>

Python

Python-Markdown 可以直接转换字符串，扩展用来支持表格、围栏代码块和脚注。

import markdown

html = markdown.markdown(text, extensions=["tables", "fenced_code", "footnotes"])

Pandoc

-f gfm 表示按 GitHub 风格读取 Markdown。第一条命令输出 HTML 片段，第二条输出完整网页。

pandoc README.md -f gfm -o README.html
pandoc README.md -f gfm -s --metadata title="README" -o README.html

常见问题

怎么把 Markdown 转成 HTML？

把 Markdown 粘贴到上面，从右侧复制 HTML，或者下载为 .html 文件。转换在你的浏览器里完成。

生成的 HTML 能直接放到网站上吗？

可以。格式标签会保留，能执行代码的内容都会去掉：<script>、<iframe>、onclick 这类事件属性和 javascript: 链接。如果你的网站要转换用户写的 Markdown，也要用同样的方式过滤，例如使用 rehype-sanitize 或 DOMPurify。

为什么 HTML 放到网站上没有样式？

HTML 片段本身不带样式，会使用你网站的样式表。需要单独打开也美观的文件，请选择「完整网页」并打开样式。

数学公式会转成什么？

选择 MathML 时，公式会变成 <math> 元素，现在的浏览器不需要脚本和样式表就能显示。选择 KaTeX HTML 时，公式会变成 KaTeX 的标记，需要 KaTeX 的样式表，完整网页会自动引入。

Markdown 里可以写 HTML 吗？

可以。<kbd>、<sup>、<mark>、<details>、带 width 的 <img> 等标签会原样保留，可能执行代码的标签会被去掉。

Markdown 和 HTML 有什么区别？

Markdown 是一种纯文本的简写格式，写起来快、读起来清楚，例如用 **加粗** 代替 <strong>加粗</strong>。HTML 是浏览器显示的标记语言，Markdown 显示在网页上之前都要先转成 HTML。

支持 GitHub 风格的 Markdown 吗？

支持：表格、任务列表、删除线、自动链接和脚注都能转换。打开「代码着色」会给代码块加上 highlight.js 的类名，再在网站上引入 highlight.js 主题即可显示颜色。