跳到主要內容
Yunknow Toolbox

← 返回部落格

Markdown 轉 HTML 怎麼做?(以及轉回來)

Markdown 讓你用純文字寫出排版——# 是標題、- 是項目、**粗體** 是強調。HTML 則是瀏覽器實際算繪的標籤標記。把 Markdown 轉成 HTML,就是把你的簡寫變成 <h1>、<ul>、<strong>;反過來則是把雜亂的 HTML 轉回乾淨的 Markdown。

我們的轉換器實際吐出的東西。 輸入 ## Notes / See the [docs](/tools/) for **details**. 與一個兩項清單,丟進 Markdown 轉 HTML 工具,回來是:

<h2>Notes</h2>
<p>See the <a href="/tools/">docs</a> for <strong>details</strong>.</p>
<ul>
<li>one</li>
<li>two</li>
</ul>

注意它沒有加的東西:沒有外層 <div>、沒有 class、沒有 <html> 骨架 —— 只有區塊元素。要貼進一個本來就有自己版面的 CMS 時,這正是你想要的。清單項目也沒有被包進 <p>,因為原始清單是緊湊式而非鬆散式。

Markdown 會變成什麼

MarkdownHTML
# 標題<h1>標題</h1>
- 項目<ul><li>項目</li></ul>
**粗體**<strong>粗體</strong>
[文字](url)<a href="url">文字</a>
```程式碼```<pre><code>程式碼</code></pre>

轉換器會逐段讀你的 Markdown、輸出對應標籤。多數工具遵循 GitHub 風格 Markdown,在原始規格之上再加了表格、待辦清單與圍欄式程式碼區塊。

兩個寫法,直接來自我們自己的Markdown ↔ HTML 轉換器。標題回傳的是

<h1>Title</h1>

而一行強調回傳的是

<p><strong>bold</strong> and <em>italic</em></p>

標題回來是裸的;強調那一行回來被 <p> 包住。這就是大部分 Markdown 意外背後的規則:區塊級的寫法取代段落,行內的寫法住在段落裡面。連結也是行內的,所以 [link](https://yunknow.cc/) 產生的是

<p><a href="https://yunknow.cc/">link</a></p>

那個 anchor 巢狀在段落裡,而不是自己獨立一個。

Markdown 轉 HTML

這是最常見的方向:你用 Markdown 寫好 README 或部落格文章,需要 HTML 貼到網頁、email 或 CMS。貼上 Markdown、轉換、複製 HTML。附上的預覽能讓你在使用前先確認排版正確。

HTML 轉 Markdown

反方向適合拿來清理。從網頁複製一段,常常夾帶一堆 <div> 與內嵌樣式;轉成 Markdown 後,就只剩你真正要的文字與結構,適合放進筆記或文件。注意:HTML 特有的細節(內嵌 CSS、複雜巢狀表格)不一定能用 Markdown 表達,會被簡化。

常見的 Markdown 陷阱

大多數「為什麼沒算繪出來?」都出在幾個習慣:

  • 清單前面要留空行。 把清單緊貼在段落下一行,不少解析器會當成同一段。先空一行再寫清單。
  • 單一換行通常會被忽略。 Markdown 會把一個換行折成空白。要硬換行,就在行尾補兩個空白,或空一行另起段落。
  • 字中的底線可能觸發斜體。 某些風格下 snake_case_name 會把中間那段變斜體。用反引號包起來,或跳脫底線:snake\_case\_name。
  • 縮排四個空白會變成程式碼區塊。 不小心的縮排會悄悄把文字變成 <pre> 輸出。

下面這個坑製造出最多「怎麼會這樣」的回報。這個輸入在兩行文字之間只有一個換行,而轉換器回傳的是

<p>line one
line two</p>

換行在原始碼裡活了下來,但沒有產生 <br> —— 兩行都落在同一個 <p> 裡,瀏覽器會把它們算成連續的一行。在 Markdown 裡,單一換行不是斷行;你需要行尾兩個空白、一個反斜線,或者空一行來開新段落。相對地,清單確實會拿到真正的結構:

<ul>
<li>one</li>
<li>two</li>
</ul>

這也是為什麼「我的斷行不見了」跟「我的清單好好的」其實是同一件事的兩面。

小問答

Markdown 有標準嗎? 最接近標準的是 CommonMark,GitHub 風格 Markdown 又在上面加了表格、待辦清單與刪除線。各家風格有差異,某站能用的註腳語法換一站可能就失效。

可以在 Markdown 裡放 HTML 嗎? 可以——多數算繪器會把原始 HTML 直接輸出,方便你塞入 Markdown 表達不了的 <sub> 或 <details>。但會消毒(sanitize)的算繪器可能把它濾掉。

輸出會包含 <html> 與 <body> 嗎? 不會。轉換器輸出的是 HTML 片段——只有 <h1>、<p> 這些。需要獨立網頁請自己包上完整文件。想認識另一種規則嚴格得多的標記語言,看我們的 XML 介紹。

在瀏覽器本機、隱私地完成

Markdown ⇄ HTML 轉換工具完全在你的裝置上執行——不上傳——並提供沙箱即時預覽,只呈現排版、不執行任何腳本。任一方向都能轉,預覽後再複製或下載。

相關工具

#dev#markdown#html