Markdown 转 HTML

<h1 id="markdown-to-html-and-back">Markdown to HTML, and back</h1>
<p>Markdown is a small language, and this page is honest about which part of it it speaks. The text you type is converted in the tab you typed it in - <strong>nothing</strong> is uploaded - and the same function produced the HTML below.</p>
<h2 id="what-this-page-does">What this page does</h2>
<ul>
  <li>Reads a pipe table with alignment, and a task list</li>
  <li><input type="checkbox" checked disabled> Converts fenced code, with the language after the fence</li>
  <li><input type="checkbox" disabled> Implements footnotes, which it does not</li>
</ul>
<table>
  <thead>
    <tr><th style="text-align: left">Setting</th><th style="text-align: right">Default</th><th style="text-align: center">What it changes</th></tr>
  </thead>
  <tbody>
    <tr><td style="text-align: left">tables</td><td style="text-align: right">on</td><td style="text-align: center">GFM only</td></tr>
    <tr><td style="text-align: left">line breaks</td><td style="text-align: right">off</td><td style="text-align: center"></td></tr>
  </tbody>
</table>
<h4 id="a-sub-subsection-which-skips-a-level">A sub-subsection, which skips a level</h4>
<blockquote>
<p>A quotation, with <strong>emphasis</strong> inside it, and a second paragraph that shows how a quote is
written back out.</p>
<p>Like that.</p>
</blockquote>
<pre><code class="language-js">const heading = document.querySelector('h1');
heading.textContent = 'Markdown';</code></pre>
<pre><code>A fence with no language, which no highlighter can color.</code></pre>
<hr>
<h2 id="setext-headings-work-as-well">Setext headings work as well</h2>
<p>A footnote marker[^1], a phrase someone wanted ==highlighted==, and an ordinary link: <a href="https://example.com/reset">reset your password</a>.</p>
<p>Raw HTML is escaped by default, so &lt;span class=&quot;badge&quot;&gt;Beta&lt;/span&gt; reads as the characters it is.</p>
<p>The guide is <a href="https://example.com/guide" title="The guide">over here</a>, the bare address <a href="https://example.com/bare">https://example.com/bare</a> is recognized, and an image with no alt text looks like this: <img src="/images/diagram.png" alt=""></p>

下面的第一个下载就是这段文本，逐字节相同。把它复制进文件即可打开，或者直接粘进接受 HTML 的页面。

--- the first text
+++ the second text
@@ -11,7 +11,7 @@
 | Setting | Default | What it changes |
 | :--- | ---: | :---: |
 | tables | on | GFM only |
-| line breaks | off |
+| line breaks | off |  |
 
 #### A sub-subsection, which skips a level
 
@@ -31,13 +31,10 @@
 
 ---
 
-Setext headings work as well
+## Setext headings work as well
-----------------------------
+
-
+A footnote marker\[^1\], a phrase someone wanted ==highlighted==, and an ordinary link: [reset your password](https://example.com/reset).
-A footnote marker[^1], a phrase someone wanted ==highlighted==, and an ordinary link: [reset your password](https://example.com/reset).
+
-
+Raw HTML is escaped by default, so \<span class="badge">Beta\</span> reads as the characters it is.
-Raw HTML is escaped by default, so <span class="badge">Beta</span> reads as the characters it is.
+
-
+The guide is [over here](https://example.com/guide "The guide"), the bare address [https://example.com/bare](https://example.com/bare) is recognized, and an image with no alt text looks like this: ![](/images/diagram.png)
-The guide is [over here][the-guide], the bare address <https://example.com/bare> is recognized, and an image with no alt text looks like this: ![](/images/diagram.png)
-
-[the-guide]: https://example.com/guide "The guide"

原文消失了 11 行，新增了 8 行。经过另一种语言的往返不是恒等变换，差异就在这里：强调换了拼法，列表写成紧凑或松散，表格被补齐以维持形状。不能变的是文字，上面那条读回检查测的就是这一点。

这个引擎实现的语法

• 标题：`#` 到 `######`，以及下划线形式的 `===` / `---`
• 段落由空行分隔，硬换行来自行尾两个空格或一个反斜杠
• 块：`>` 引用，`-` 与 `1.` 列表（可嵌套、紧凑或松散，支持 `start`），`---` 分隔线，反引号或波浪线围栏的代码
• 行内：强调、加粗、删除线、代码段、链接（行内与引用式）、图片、`<https://…>` 自动链接
• 仅 GFM：带对齐的管道表格、任务列表项、`~~删除线~~`、直接写在文本里的链接

这些数字没有说明的事

• 这个引擎实现的是一个有名字的子集，而不是整份规范，下面的规则表会把它列出来——包括两处对 CommonMark 的偏离：四个空格不开启代码块，列表续行必须缩进。
• 读回检查针对的是这个页面，而不是你的文档：它写出的 Markdown 由自己的解析器读回来，再比较文字。结构可能在途中换一种拼法；文字变了才是这里的 bug，发现里会指出位置。
• 这个方向不会丢东西，因为 Markdown 是更小的语言：它能表达的一切在 HTML 里都有地方可去。反方向回来时，有些元素没有 Markdown 对应物，无法保留内容的表格会把它们逐个点名。
• 原始 HTML 默认被转义，这是决定而不是限制：粘贴进转换器的文档是不可信输入，把它的标记直接交给浏览器，正是转换器变成注入最后一环的方式。
• 答案是源码，不是预览。页面把产出的 HTML 打印出来，而不是塞回自己体内，因为绘制别人的标记，正是上面那些转义要避免的事。把结果放进文件就能看到它被绘制。