Markdown 轉 HTML

免費線上 Markdown 轉 HTML：貼上即得 HTML，支援表格、任務清單、程式碼高亮，可複製片段或下載含樣式的完整網頁，在瀏覽器完成不上傳。

立即使用Markdown 轉 HTML（免費、免註冊）

左邊貼上 Markdown，右邊立刻得到 HTML：「複製」拿乾淨的 HTML 片段貼進網站後台或電子報，「完整文件」與「下載」拿到一份可以直接用瀏覽器打開的完整網頁（含中文編碼、可選排版與程式碼配色）。GitHub 風格語法、自動換行、程式碼高亮、包含樣式四個開關可以隨時切換，「預覽」分頁看排版效果。轉換在瀏覽器完成，內容不會上傳。

四個開關各管什麼

轉換選項（預設全部開啟）
開關管什麼
GitHub 風格表格、刪除線、任務清單、網址自動變連結
自動換行按一次 Enter 就輸出 <br>
程式碼高亮程式碼區塊依語言加上色彩標記
包含樣式完整文件與下載的網頁附上排版 CSS

「包含樣式」只影響完整文件與下載；「複製」拿到的片段本來就沒有樣式。

開關打開與關掉，實際差在哪

範例一：刪除線＋表格

~~原價~~ 特價

| 品項 | 價格 |
| --- | ---: |
| 咖啡 | 80 |

GitHub 風格開

<p><del>原價</del> 特價</p>
<table>
<thead>
<tr>
<th>品項</th>
<th align="right">價格</th>
</tr>
</thead>
<tbody><tr>
<td>咖啡</td>
<td align="right">80</td>
</tr>
</tbody></table>

GitHub 風格關

<p>~~原價~~ 特價</p>
<p>| 品項 | 價格 |
| --- | ---: |
| 咖啡 | 80 |</p>

關掉 GitHub 風格後，表格與刪除線都變成普通文字；要貼到只認標準 Markdown 的地方才需要關。

範例二：兩行地址電話

地址：台北市
電話：02-1234-5678

自動換行開

<p>地址：台北市<br>電話：02-1234-5678</p>

自動換行關

<p>地址：台北市
電話：02-1234-5678</p>

自動換行關掉時，兩行會在網頁上接成一行；寫地址、歌詞、詩這類一行一行的內容，建議保持開啟。

三種拿結果的方式

  • 複製：只有轉出來的內容（<h1>、<p>、<table>…），沒有 <html>、<head>，適合貼進部落格或網站後台的 HTML 模式、電子報編輯器。
  • 完整文件：把整份網頁放進剪貼簿：包含文件類型宣告、中文編碼、手機縮放設定，網頁標題自動取第一個 # 標題（沒有標題就叫「Markdown 文件」）。
  • 下載：跟完整文件一樣的內容，存成 document.html，雙擊就能用瀏覽器打開、寄給別人或放上網站。

「完整文件」長這樣（關掉包含樣式時）

<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>活動公告</title>
</head>
<body>
<h1>活動公告</h1>
<p>本週六下午兩點開始。</p>
</body>
</html>

打開「包含樣式」時，<head> 裡會多一段 CSS：內文寬度 820px 置中、中文字型、表格框線、引用色條與深色底的程式碼配色，打開就有排版。

貼到別的網站前要注意

  • 程式碼配色要有 CSS：高亮開啟時，程式碼裡每個關鍵字都包了一層 <span class="hljs-…">，要搭配對應的 CSS 才有顏色。只複製片段貼到別的網站，通常看不到顏色；對方網站沒有這組樣式時，把「程式碼高亮」關掉，輸出會是乾淨的 <pre><code>。
  • 你寫的 HTML 原樣保留：Markdown 裡夾的 HTML（包括 script）會一字不改出現在輸出裡；別人給的內容轉換前先檢查。頁面上的「預覽」為了安全會拿掉這些會執行的內容，所以預覽看不到不代表輸出裡沒有。
  • 圖片用完整網址：![說明](photo.jpg) 會輸出成相對路徑，放到別的網站就找不到圖；改成 https:// 開頭的完整網址。
  • 電子報：多數電子報系統會自己加樣式，建議用「複製」的片段；有些信箱會忽略 <style>，所以「包含樣式」的排版在信件裡不一定出現。

做不到的事

這一頁沒有開檔按鈕，.md 檔請用文字編輯器打開後全選貼上（或在 Markdown 編輯器匯入後按「下載 .html」）；下載的檔名固定是 document.html，存好後可以自己改名。數學公式、腳註、Mermaid 流程圖不會轉成圖形；要反過來把網頁轉成 Markdown，用站上的 HTML 轉 Markdown。

Markdown 轉 HTML功能特點

  • GitHub 風格語法（GFM）：表格、任務清單、刪除線、自動連結
  • 程式碼區塊依語言自動語法高亮
  • 可選輸出「純 HTML 片段」或「含內嵌樣式的完整網頁」
  • 「自動換行」可開關：開啟時單一換行也會換行，符合一般寫作習慣
  • 預覽與 HTML 原始碼分頁對照，所見即所得
  • 一鍵複製 HTML，或下載成 .html 檔直接用瀏覽器開啟
  • 全程在瀏覽器本地處理，內容不上傳，離線也能用

如何使用Markdown 轉 HTML？

  1. 在左側輸入或貼上 Markdown 內容
  2. 依需求切換 GitHub 風格、自動換行、程式碼高亮、包含樣式
  3. 在「預覽」看渲染效果，切到「HTML 程式碼」看原始碼
  4. 按「複製」拿 HTML 片段、「完整文件」拿整個網頁，或按「下載」存成 .html 檔

Markdown 轉 HTML常見問題

輸出的 HTML 包含樣式嗎？

看你按哪個按鈕：「複製」給的是乾淨的 HTML 片段（沒有 head 與樣式），適合貼進既有網頁或部落格編輯器；「完整文件」與「下載」給的是完整網頁，打開「包含樣式」時會附上排版與程式碼配色的 CSS，用瀏覽器直接開就有排版，關掉就只有結構。

支援 GFM 語法嗎？

支援 GitHub Flavored Markdown：表格、任務清單 - [ ]、刪除線 ~~文字~~、自動把網址變連結。標準 Markdown 的標題、清單、引用、圖片、連結當然也都支援。

程式碼會有語法高亮嗎？

會。用 ``` 圍起來並標註語言（例如 ```javascript），輸出時會依語言上色；打開「包含樣式」時配色的 CSS 也會一起帶在下載的網頁裡。

Markdown 裡寫的 HTML 會保留嗎？

會，複製與下載的 HTML 會原樣保留你寫的 HTML 標籤。頁面上的「預覽」為了安全，會拿掉 script、iframe、onerror 這類會執行程式的內容，其他排版標籤照常顯示。

「自動換行」是什麼意思？

標準 Markdown 要空一行才分段、單一換行會被接在同一行。打開自動換行後，按一次 Enter 就換行，比較符合一般人寫筆記的習慣；要嚴格照標準就關掉。

轉出來的 HTML 可以用在電子報或網站嗎？

可以。要貼進電子報或 CMS 通常選純片段；要當獨立頁面或寄給別人看就選完整網頁。轉換都在你的瀏覽器裡完成，內容不會傳到伺服器。

可以把 .md 檔直接轉成 .html 檔嗎？

可以，但這一頁沒有開檔按鈕：用文字編輯器打開 .md 檔全選複製、貼到左邊，按「下載」就會得到 document.html。想直接選檔案，可以在 Markdown 編輯器的「開啟文件」匯入 .md，再按「下載 .html」。

為什麼貼到網站後台，程式碼沒有顏色？

程式碼高亮只是在 HTML 裡加上 hljs 開頭的 class，顏色要靠 CSS。「複製」的片段不含 CSS，對方網站也沒有這組樣式時就只會是黑白的。可以改用「完整文件」（打開包含樣式），或把「程式碼高亮」關掉輸出乾淨的程式碼區塊，交給對方網站自己的樣式處理。

轉出來的 HTML 可以再轉回 Markdown 嗎？

可以，用站上的「HTML 轉 Markdown」，貼上 HTML 就會轉回 Markdown，表格、清單、程式碼區塊都會保留。