Markdown 轉換

Markdown 與 HTML 雙向轉換,提供預覽

使用說明

🚀 快速開始

  • 將內容貼到左側輸入框
  • 選擇模式(→HTML 或 →Markdown)
  • 自動轉換,結果顯示在右側
  • 預覽/HTML 輸出:Markdown → HTML 預設渲染 KaTeX/Mermaid

📌 常見使用情境

  • 部落格/文件預覽:快速檢查 Markdown 呈現與配色
  • 郵件投遞:將匯出的 HTML 貼到郵件內文(偏好 inline 樣式)
  • 富文本 → Markdown:清理網頁/CMS 富文本,轉為可版控的 Markdown
  • 技術文件:含公式/流程圖的一鍵渲染與匯出
  • 編輯器遷移:協調不同 Markdown 方言的差異
  • Wiki/知識庫:將 HTML 頁面轉為 Markdown 後匯入
  • API 變更記錄:把 HTML/描述轉為 Markdown 以利評審/PR

🎛️ 轉換參數與渲染

  • Markdown → HTML 自動渲染 KaTeX/Mermaid
  • HTML → Markdown 保留/還原原始語法,不重渲染
  • 預設支援 GFM(表格/任務);嚴格模式請用標準 Markdown
  • 已啟用段內換行;嚴格行為可用空行分段或行末兩個空白
  • 超大輸入可能觸發降級預覽(限制渲染/停用高亮)

🧭 使用建議

  • 郵件:使用 inline 樣式提升相容性
  • 長文:分段轉換,避免卡頓

⚠️ 限制與相容性

  • 方言差異:各平台渲染不同,建議使用通用語法
  • HTML → Markdown 為盡力還原:樣式/版面常遺失
  • HTML → Markdown 會忽略部分標籤/屬性(腳本/樣式/中繼、嵌入與表單、媒體、on* 事件、style/class 等)
  • 複雜表格/巢狀可能被簡化,請復核
  • 圖片/影音保留外部連結,不下載
  • 第三方預渲染的 Mermaid SVG 難以可逆還原

❓ 常見問題

目標平台呈現與本預覽不一致,如何診斷?

先確認目標平台的 Markdown 方言(CommonMark/GFM/自研擴充);避免使用原始 HTML 與私有擴充;換行採用標準寫法(空行分段或行末兩個空白)。先以最小案例在目標平台驗證,再逐步擴大。

匯出的 HTML 要如何安全上線?

本工具不執行 <script>,但也不會自動清洗所有標籤/屬性。上線端應在伺服器或發佈流程使用白名單安全庫(如 DOMPurify)清洗,禁止 on* 事件與危險協定,並以 CSP 約束外聯/內嵌指令碼。

HTML → Markdown 的複雜結構失真,怎麼處理?

建議:1)將巢狀表格/深層列表改為更通用語義(管線表、扁平列表);2)先以「純文字貼上」清理 span/style/class 後再轉換;3)抽出最小案例定位問題段並調整寫法。

KaTeX/Mermaid 的限制與排障?

語法:KaTeX 用 $$…$$/行內 $…$;Mermaid 以 ```mermaid 圍欄。超大輸入可能觸發降級(轉為原始碼/停用高亮)。排障:降低密度、分段轉換、以最小案例復現語法問題。還原:KaTeX 可自渲染後 HTML 還原;Mermaid 僅限本工具產生且內嵌原始語法者可還原。

Markdown 轉換器 - 轉換、預覽、程式碼高亮 - CrateX.app