什麼是Markdown 轉 HTML?
Markdown 轉 HTML 工具可將您的 Markdown 內容即時轉換為結構規範的 HTML。它支援完整的 CommonMark 語法,包含表格、程式碼區塊和待辦清單,方便您預覽內容或為 CMS 產生 HTML。
轉換採用 marked 解析器並啟用 GitHub Flavored Markdown 擴充,因此表格、圍欄程式碼區塊、任務清單和自動連結的呈現方式跟 GitHub README 一模一樣。預覽會隨輸入即時更新,原始碼檢視顯示你複製時會得到的確切 HTML——語意化的 h1–h6、ul/ol、pre/code、img,完全沒有內嵌樣式。開啟「壓縮」即可得到精簡的單行輸出;下載則會把內容包進一個獨立的 .html 文件,或在你設定範本後套用你自己的範本。
使用方法
- 在編輯器中輸入或貼上您的 Markdown 內容——支援標題、清單、連結、圖片、程式碼區塊和表格。
- 即時檢視轉譯後的 HTML 預覽,並可在預覽模式和原始 HTML 原始碼之間切換。
- 複製乾淨的 HTML 輸出,或下載為 .html 檔案,直接用於您的網站或 CMS。
何時使用
- 用 Markdown 寫好部落格文章,再把乾淨的 HTML 貼到不接受 .md 的 CMS 後台。
- 把專案 README 轉成 HTML,放到文件網站或產品介紹頁。
- 發佈前先檢查腳註、任務清單這類比較少用的 Markdown 語法渲染效果。
結果
您用 Markdown 撰寫了一篇技術教學,現在需要貼到一個只接受 HTML 的 CMS 中。在這裡轉換可取得乾淨的語意化 HTML,並保留正確的標題層級和程式碼醒目標記。
常見問題
- 本工具支援哪一種 Markdown 方言?
- 在 CommonMark 上再加 GitHub Flavored Markdown (GFM),包含管線表格、附語言提示的圍欄程式碼、~~text~~ 刪除線、[x] / [ ] 任務清單,以及裸 URL 自動轉成連結。
- 輸出 HTML 會包含內嵌 CSS 或 class 嗎?
- 不會。輸出是純語意化 HTML——h1、h2、p、ul、pre、code、img。請套用自己的 CSS,讓最終頁面符合網站排版,不必和框架預設樣式衝突。
- 程式碼區塊會自動上色嗎?
- 區塊會被包成 <pre><code class="language-xxx">,搭配 Prism 或 highlight.js 等程式庫即可在你的網站上著色。轉換本身不會內嵌任何顏色樣式。
- Markdown 裡夾雜的 HTML 標籤會怎麼處理?
- 原樣保留。需要嵌入影片、可折疊內容或 Markdown 不支援的元素時,可以直接寫 <div>、<iframe>、<details> 等標籤,轉換不會更動它們。
- 可以反過來把 HTML 轉回 Markdown 嗎?
- 本工具只做 Markdown 轉 HTML。反向需要另一個 HTML 轉 Markdown 工具,因為 HTML 攜帶的樣式與排版在 Markdown 中無法完整對應,流程並不對稱。