跳到主要內容

← 返回部落格

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

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

Markdown 會變成什麼

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

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

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> 輸出。

小問答

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

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

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

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

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

相關工具