把 Markdown 貼進免費的編輯器，然後從兩顆按鈕裡挑一顆。.html 會下載一個含樣式的完整網頁。「複製 HTML」則只把渲染後的標記放進剪貼簿，可以直接貼進 CMS、電子報工具或部落格系統。
轉換由 marked.js 在你的瀏覽器裡完成。沒有任何東西被上傳，檔案從頭到尾都留在你的電腦上。
這已經涵蓋單篇文件，也就是大多數情況。整個資料夾的檔案、排程建置，以及任何不能靠人手動按按鈕的流程，就交給 Pandoc 或靜態網站產生器。下方的表格列出每個選項真正擅長的地方。
重點速覽
| 最快路線 | 本站編輯器的 .html 按鈕 |
|---|---|
| 兩種輸出形態 | 含樣式的完整網頁，或只有內層標記 |
| 需要上傳嗎 | 不需要，轉換在瀏覽器本機執行 |
| 批次與自動化 | Pandoc，或靜態網站產生器 |
| 支援的方言 | GitHub 風格 Markdown，含表格 |
兩顆匯出按鈕，各在什麼時候用
- 成品就是那個檔案時按 .html；目的地已經有自己的設計時，就複製標記。
- 兩顆按鈕產生的內文標記完全相同，差別只在外面包了什麼。
- 整個轉換都在瀏覽器裡完成，沒有上傳，也沒有留存。
- 相對圖片路徑會原封不動帶過去，這正是上傳後圖片消失的原因。
- 把 Markdown 貼進或打進編輯器，先把預覽窗格看過一遍。
- 預覽裡形狀不對的地方先修掉，特別是表格和程式碼圍欄。
- 要成品檔案就按 .html；要貼到別處的標記就按「複製 HTML」。
- 想要輸入與輸出並排？Markdown 轉 HTML 工具在同一個畫面完成同樣的事。
要成品檔案，就下載 .html
.html 按鈕給你一個獨立文件。內容包在完整的 HTML 頁面裡，CSS 也內嵌其中。用任何瀏覽器打開，看起來就和預覽窗格一樣。當這個檔案本身就是成品時用它：寄出去的報告、封存的文件、一個簡單的頁面，或是交給不會安裝任何軟體的客戶。
目的地自帶樣式，就複製 HTML
「複製 HTML」只給你內層標記。你拿到的是 <h2>、<p>、<table>、<ul> 這些標籤，沒有頁面外殼，也沒有樣式。WordPress、電子報編輯器或公司的 CMS 要的就是這個。
注意：把一整個獨立網頁貼進 CMS，會造成樣式重複、字體打架，常常還多出一條奇怪的捲軸。目的地已經有設計，就只複製標記。
每個元素會變成什麼 HTML
轉換是一對一、可預期的對應。像這樣一小段文件：
## 價格
我們的 **專業** 方案每月 $9。
- 無限份文件
- 優先技術支援
會變成完全對應的 HTML。
<h2>價格</h2>
<p>我們的 <strong>專業</strong> 方案每月 $9。</p>
<ul>
<li>無限份文件</li>
<li>優先技術支援</li>
</ul>
你實際會用到的元素，完整對照如下。
| Markdown | 輸出的 HTML |
|---|---|
| # 標題 | <h1>標題</h1> |
| **粗體** 與 *斜體* | <strong> 與 <em> |
| [文字](網址) | <a href="網址">文字</a> |
|  | <img src="網址" alt="替代文字"> |
| > 引言 | <blockquote><p>引言</p></blockquote> |
| 圍欄式程式碼區塊 | <pre><code>...</code></pre> |
| 直線表格 | 含 <thead> 與 <tbody> 的 <table> |
| 獨立一行的 --- | <hr> |
這個對應是單向而機械化的，所以產出的 HTML 乾淨又具語意。這正是 Markdown 的全部魅力：你只打標點符號，轉換器就替你生出瀏覽器和搜尋引擎都讀得懂的結構標籤。
五種轉換方式與各自的取捨
挑能完成任務的最輕量工具。下面每個選項產出的都是合法 HTML，差別在安裝成本，以及它替你多做了多少事。
| 方式 | 安裝需求 | 最適合 | 取捨 |
|---|---|---|---|
| 本站編輯器 | 不需要 | 單篇文件，現在就要 | 一次只能一個檔 |
| Pandoc | 指令列工具 | 批次、腳本、其他格式 | 要學一些參數 |
| VS Code 擴充套件 | 編輯器外掛 | 邊寫邊轉換 | 輸出品質因套件而異 |
| 靜態網站產生器 | 較完整的工具鏈 | 整個網站的頁面 | 只有一個檔就太重 |
| 程式碼中的函式庫 | 安裝套件 | 渲染使用者內容的應用 | 消毒要自己處理 |
你的情況適合哪一種
- 單份報告或 README。論省力永遠是編輯器獲勝。
- 隨產品一起發佈的技術文件。用 Hugo、Jekyll、Astro 這類靜態網站產生器，每次建置就把所有檔案轉好，還附帶導覽、搜尋與版型。
- 會渲染使用者輸入的應用程式。把 marked、markdown-it 或 python-markdown 放進程式碼，並且務必搭配消毒工具。陌生人送來的原生 HTML 永遠不安全。
用 Pandoc 批次轉換
當你手上是五十個檔案而不是一個，Pandoc 就是標準工具。安裝後一行指令就能轉換。
pandoc notes.md -o notes.html
pandoc notes.md -s --metadata title="我的筆記" -o notes.html
pandoc -f gfm -t html *.md -o combined.html
這三行指令分別做什麼
- 第一行輸出片段，形狀等同本站的「複製 HTML」。
- 第二行加上
-s，輸出帶完整<head>的獨立網頁，相當於 .html 下載。 - 第三行明確指定以 GitHub 風格 Markdown 解析。檔案有用到表格、待辦清單或刪除線時特別重要，因為 Pandoc 預設方言對這些的處理並不相同。
另外兩個值得記住的參數
--css=style.css 替獨立網頁掛上你自己的樣式表。--toc 會依標題自動生成有連結的目錄，效果就像我們的目錄產生器在瀏覽器裡做的事。把指令包進 shell 迴圈或 Makefile，一整個資料夾的筆記按一次鍵就變成一整個資料夾的網頁。
轉換時最常出錯的地方
匯出後的意外大多來自三個原因。
一、轉換器設成了錯的方言
表格、待辦清單、刪除線都是 GFM 功能。轉換器若跑在嚴格 Markdown 模式，就會把它們當純文字原樣送出。
錯誤的輸出 正確
<p>| 姓名 | 職務 |</p> <table><thead>...
（轉換器處於嚴格 （轉換器設為 GFM，
Markdown 模式） 或 pandoc -f gfm）
二、相對圖片路徑不會自己搬家
路徑在轉換後原封不動。 會變成 <img src="img/chart.png">。HTML 放到哪裡，同樣的相對位置就必須有那個資料夾，圖片才會出現。只上傳 HTML、把圖片留在原地，是匯出結果破圖最常見的單一原因。
三、原生 HTML 與安靜的自動替換
多數轉換器會把你寫的內嵌 HTML 原樣放行，但會做消毒的系統會把它剝掉。依賴 <img width> 或 <br> 的地方，貼上後都要再看一次。智慧引號與破折號的自動替換也可能悄悄改動文字，文件裡若有寫在程式碼區塊外的程式片段就要特別留意。
發佈前的兩分鐘檢查
最保險的流程其實很短。
- 轉換完成後用瀏覽器打開結果，和編輯器預覽並排比對一次。
- 點一個站內連結，再點一個站外連結。
- 確認每張圖片都真的出現，而不是留下一個空框。
- 把最寬的那張表格橫向捲一次，確定沒有被頁面裁掉。
- 把視窗縮到手機寬度再看一遍，因為在你螢幕上塞得下的表格，讀者的裝置未必塞得下。
哪個語法轉出來怪怪的，完整指南列出了每個元素應有的輸出可以對照，Markdown 與 HTML 的比較則說明什麼時候該乾脆自己寫標籤。需要的是文件而不是網頁嗎？把 Markdown 轉成 PDF 同樣從這個預覽窗格出發。
相關問題
立即使用編輯器
開啟編輯器