三個步驟把 Markdown 轉成 HTML
- 你拿到的是語意化片段：只有標籤，沒有 class、沒有 CSS、沒有
<head>。 - 可以複製進 CMS 的 HTML 區塊，或下載成
.html檔。 - 由 marked.js 解析、DOMPurify 淨化，兩者都在你的分頁裡執行。
- GitHub 風格 Markdown 以外的語法，會原樣變成純文字。
輸出框已經有內容了，工具的部分就完成了。接下來要說的是：那些標籤代表什麼、為什麼有些語法被忽略，以及這段標記最後該貼到哪裡。
從 Markdown 到標記的三個步驟
- 把 Markdown 貼進輸入框。來源可以是 GitHub 的 README、Obsidian 或 Notion 筆記、AI 聊天的回答，或你當場打的字。整份文件沒問題，只想確認一小段語法也沒問題。
- 在輸出框讀 HTML。結果會立刻出現，每個結構元素獨立成行，方便你掃過去檢查。在左邊改 Markdown，右邊的標籤跟著變，這是搞懂每個符號會產生什麼的最快方法。
- 複製或下載結果。「複製」把原始碼放進剪貼簿，可以貼進 CMS 區塊、電子報範本或靜態網站；「下載」則存成
.html檔，任何瀏覽器都打得開。
在你分頁裡跑的東西
幕後有兩個函式庫在工作：marked.js 負責解析 Markdown，DOMPurify 負責淨化結果，兩者都是這個頁面載入的一般 JavaScript。
全程沒有任何資料傳到伺服器，所以尚未發佈的文章、公司內部文件、客戶專案都可以放心貼上。想讓寫作和轉換在同一個地方完成？首頁的免費 Markdown 編輯器有即時預覽和同樣的匯出按鈕。
實例：Markdown 進去，HTML 出來
實際跑一次，勝過再多的抽象說明。下面是一段用 Markdown 寫的版本更新說明，就是你會貼進輸入框的樣子：
# Release Notes
We shipped **dark mode** and fixed the *export* bug.
- Faster preview
- Smaller bundle
See the [changelog](https://example.com/changelog).
> Upgrade before 1 March.
另一端出來的東西
九行 Markdown 變成十一行標記，沒有多加東西，也沒有任何裝飾：
<h1>Release Notes</h1>
<p>We shipped <strong>dark mode</strong> and fixed the <em>export</em> bug.</p>
<ul>
<li>Faster preview</li>
<li>Smaller bundle</li>
</ul>
<p>See the <a href="https://example.com/changelog">changelog</a>.</p>
<blockquote>
<p>Upgrade before 1 March.</p>
</blockquote>
三個值得注意的細節
再看一次那段輸出，有三件事是刻意做成這樣的：
- 沒有 class、沒有行內樣式、沒有多餘的 div。這是最精簡的語意化標記，也正是 CMS 或版型範本最想收到的東西。
- 引用區塊裡包了一層
<p>，而不是裸文字。這是符合規範的正確寫法，任何標準解析器都會這樣產出。 - 清單是乾淨的
<ul>帶兩個<li>。中間沒有多餘空白，也沒有硬塞進來的空段落。
所謂「乾淨的 HTML」就是這個意思：標記只承載結構，外觀交給你自己的 CSS 決定。還在猶豫該用哪一種格式寫作？Markdown 與 HTML 比較把取捨完整攤開來談。
每個 Markdown 元素會變成什麼 HTML
語言裡的每個結構都對應到特定標籤。把這張表放在手邊，你在按下轉換之前就能預測輸出：
| 你寫的 Markdown | 產生的 HTML | 說明 |
|---|---|---|
# 標題 | <h1>標題</h1> | 一到六個 # 分別對應 <h1> 到 <h6> |
| 空行隔開的文字區塊 | <p>…</p> | 段落的分隔靠空行，單純換行不算 |
**粗體** | <strong>粗體</strong> | __粗體__ 產生相同標籤 |
*斜體* | <em>斜體</em> | 底線也可以，但字中間無效 |
~~刪除線~~ | <del>刪除線</del> | GitHub 風格 Markdown 的擴充語法 |
- 項目 | <ul><li>項目</li></ul> | * 和 + 同樣可以當項目符號 |
1. 項目 | <ol><li>項目</li></ol> | 從 3 開始編號會加上 start="3" |
[文字](網址) | <a href="網址">文字</a> | 括號內加引號標題會變成 title 屬性 |
 | <img src="pic.jpg" alt="替代文字"> | 沒有寬高參數，需要就改寫成 HTML 標籤 |
`程式碼` | <code>程式碼</code> | 裡面的角括號會自動跳脫 |
| 標註語言的圍籬程式碼區塊 | <pre><code class="language-js"> | 語言標記會變成 class，供語法高亮套件使用 |
> 引言 | <blockquote><p>引言</p></blockquote> | 規範要求內層必須包段落 |
| 管線符號表格 | <table><thead><tbody> | 對齊用的冒號會變成 style="text-align:…" |
- [ ] 待辦 | <li><input type="checkbox" disabled> | GFM 待辦清單，核取方塊會顯示但不能點 |
獨立一行的 --- | <hr> | 三個以上的減號、星號或底線都可以 |
| 行尾兩個空白再換行 | <br> | GFM 裡行尾加反斜線效果相同 |
| 原始碼中的內嵌 HTML | 原樣通過，再經過淨化 | 安全標籤會保留，script 與事件屬性會被移除 |
整個語言差不多就這麼大
十七列幾乎就是全部的詞彙量，這也是為什麼一個下午就能學會 Markdown。Markdown 語法速查表是這張表的可列印版本。
想看每一列背後的細節，完整 Markdown 指南逐一深入每個元素，表格指南則專門處理最容易出錯的那一項。
哪些東西轉不乾淨，該怎麼處理
誠實的工具會告訴你界線在哪裡。以下五件事最常讓人意外，而且每一件都有簡短的解法。
你拿到的是片段，不是完成的網頁
- 輸出沒有任何樣式。你拿到的是
<h1>和<p>，不是字體、顏色或間距。這是刻意的，因為外觀應該由 CMS 或網站版型的 CSS 決定。 - 沒有網頁外殼。沒有
<!DOCTYPE html>、沒有<head>、沒有編碼宣告，因為那些屬於你要貼進去的那個頁面。
真的需要獨立檔案？把輸出貼進一份最小範本的 <body> 之間，並記得加上 <meta charset="utf-8">，漏掉這一行正是中文變成亂碼最常見的原因。更快的做法是用編輯器的 .html 匯出，它會把同樣的標記包進一份附帶樣式表的完整文件。
轉換器會改動或丟掉的三件事
- 相對路徑仍然是相對路徑。
會變成src="img/q3.png"，它相對於 HTML 最後存放的位置解析，而不是你原本的資料夾。標記要搬家的話，轉換前先改成絕對網址。 - 不安全的內嵌 HTML 會被移除。DOMPurify 會清掉
<script>、onclick之類的事件屬性，以及javascript:開頭的網址。影片用的<iframe>也可能依淨化設定被拿掉。 - 非 GFM 的語法不會生效。某些方言的註腳、定義清單、Pandoc 的
:::區塊、數學式，都會原封不動變成純文字。
最後一項要補一句說明，因為預覽看起來好像跟它矛盾。預覽窗格確實會替標了語言代碼的圍欄上色、用 KaTeX 排版 $數學式$、把 mermaid 圍欄畫成圖表，但這三項都是轉換完成之後、只加在預覽上的顯示強化。輸出框裡的 HTML 是轉換本身的結果，所以公式貼進 CMS 之後，仍然是錢字號加文字。
這裡對齊的範圍是 GitHub 風格 Markdown，所以 GFM 指南就是「哪些語法會生效」的權威清單。至於為什麼會冒出這麼多互相競爭的方言，什麼是 Markdown 說了這段來龍去脈。
小提醒：影片嵌入碼和追蹤程式碼建議貼進 CMS 之後再補，不要寫在 Markdown 裡。這樣它們不會被淨化掉，你的原始檔也保持乾淨好搬。
轉出來的 HTML 最後要放到哪裡
會來到這一頁的理由其實就那幾種。先認出自己屬於哪一種，就能最快找到該按的按鈕。
四種常見的去處
- 貼進 CMS。WordPress、Ghost、Webflow、Shopify 和多數客服系統都接受原始 HTML 區塊。轉換、複製、貼上，標題和清單就能保住結構，而不是變成一整片灰色文字。
- 電子郵件與電子報。郵件軟體至今仍需要真正的標記。把草稿轉出來，就得到一個乾淨的起點，再交給發信工具套樣式。
- 靜態網站與舊頁面。有時候頁面就是得是一個檔案。下載
.html丟進專案，剩下的交給網站的樣式表。 - 檢查語法。清單在 GitHub 上死活不肯渲染時，把同一份原始碼丟進來轉一次，馬上就知道問題出在你的 Markdown 還是那個平台。
旁邊的幾個工具
反方向，從既有標記變回純文字，是 HTML 轉 Markdown 轉換器負責的事。那個方向會流失細節，而那一頁會誠實告訴你流失了什麼。
如果目標是要寄出去的文件而不是要發佈的網頁，請改用 Markdown 轉 PDF，需要自動化路線的話就讀把 Markdown 轉成 PDF 的詳細說明。
還有兩個小幫手。Markdown 檢視器可以直接渲染別人寄來的 .md 檔，中間不隔著編輯窗格；表格產生器則幫你排好管線符號表格，不必自己數減號。
想了解轉換本身的原理，常見問題裡的如何把 Markdown 轉成 HTML 用文字說明了整個流程，常見問題總覽則收錄了其餘大家會問的題目。
相容性資料驗證日期
常見問題
這個 Markdown 轉 HTML 轉換器免費嗎？
完全免費。沒有帳號、沒有付費方案、沒有文件數量限制，輸出也不加浮水印。不管是一行片段還是上百頁的手冊，想轉幾次都可以。
我的 Markdown 會被上傳嗎？
不會。解析由 marked.js 在你的分頁內完成，結果再用 DOMPurify 在本機淨化。文字不會傳到任何伺服器，所以機密草稿可以放心使用，頁面載入後即使斷網也照常運作。
為什麼輸出的 HTML 沒有 CSS 樣式？
因為片段不該自帶設計。你拿到的是語意化標籤，外觀交給你網站的樣式表控制。想要完成品，請用編輯器的 .html 下載，它會把標記包成一份含樣式的完整文件。
它支援哪一種 Markdown 方言？
GitHub 風格 Markdown（GFM），所以表格、待辦清單、刪除線和圍籬程式碼區塊都能用，原始語法當然也全部支援。細節請見 GFM 指南。
可以把 HTML 轉回 Markdown 嗎？
可以，用另一個工具：HTML 轉 Markdown 轉換器。但要有心理準備，那個方向會失真，因為 Markdown 無法表達 class、行內樣式或巢狀表格。
延伸閱讀
立即使用編輯器
開啟編輯器