為什麼 Markdown 匯出 HTML 很難做好？
Markdown 是寫作的理想格式——純文字、版本友好、專注內容。但當你需要分享文章時，問題來了：直接發 .md 檔案，對方需要安裝 Markdown 檢視器；轉成 PDF，印刷感太重，在手機上閱讀體驗糟糕；複製到富文字編輯器，格式又往往亂掉。
匯出 HTML 是最自然的選擇——瀏覽器原生支援，任何裝置都能開啟。但「能開啟」和「好看」之間差著很遠：裸 HTML 沒有樣式，程式碼區塊黑白一片，暗色模式要么完全缺失，要么需要手動維護一份 CSS。
什麼是「精美 HTML」？
一份高品質的 Markdown → HTML 匯出，應當滿足以下標準：
- 單一檔案——所有樣式內聯，不依賴外部 CSS/JS/字型，可以直接發給別人或託管到任意靜態伺服器
- 內建暗色模式——透過
@media (prefers-color-scheme: dark)自動跟隨系統，無需 JS - 主題化程式碼區塊——語法高亮顏色與整體配色協調，而不是用一套通用的黑色背景
- 排版精良——合適的行距、字號、字型堆疊、段落間距；表格、引用區塊、數學公式都有對應樣式
- 內容寬度可控——不鋪滿整個瀏覽器寬度，保持舒適的閱讀列寬（通常 65–80 字元）
Design Token 驅動的主題系統
Mark.build 使用 Design Token 作為主題的核心架構。所有視覺屬性——文字顏色、背景色、程式碼區塊背景、強調色、圓角、字型——都透過 Token 統一管理，而不是散落在各處的硬編碼值。
Token 分三層：
- Primitive（原始值）——顏色色階（
blue.600、gray.100）、字型名稱、字號 - Semantic（語義化）——
text-primary、bg-surface、accent，同時定義亮色和暗色兩套值 - Component（元件級）——
code-block.bg、table.header-bg，從 Semantic 自動派生
當你切換主題時，所有元素——標題、段落、程式碼區塊、Mermaid 圖表、KaTeX 公式、表格——都從同一套 Token 獲取樣式，瞬間同步更新。
用 Mark.build 匯出 HTML：分步指南
第一步：開啟編輯器
造訪 mark.build/editor。編輯器基於 CodeMirror 6，支援語法高亮、快捷鍵（⌘B 加粗、⌘I 斜體、⌘K 連結）和捲動同步預覽。所有文件儲存在瀏覽器本地，不上傳伺服器。
第二步：選擇主題
點擊工具列中的主題選擇器，從內建主題中選擇：
- Default——乾淨的藍色強調色，適合技術文件
- Tech Blog——紫色強調色 + 深色程式碼區塊，Dracula 風格
- Academic——襯線標題字型，適合論文和長文
- Minimal——極簡灰色系，減少視覺干擾
- Magazine——紅色強調色 + Playfair Display 標題，雜誌風格
用工具列的日/月圖示切換亮色和暗色模式，預覽效果。
第三步：匯出 HTML
點擊右上角的「匯出」按鈕，選擇「匯出 HTML」。匯出的檔案是一個完全自包含的 .html 檔案：
- 所有 CSS 內聯在
<style>標籤中 - 亮色和暗色兩套 CSS 變數都寫入檔案，透過
@media (prefers-color-scheme: dark)自動切換 - Mermaid 圖表匯出為內聯 SVG，不依賴外部執行時
匯出其他格式
除了 HTML，Mark.build 還支援：
- PDF——調用瀏覽器列印對話框，僅亮色模式，適合乾淨可列印的文件
- PNG——以 2 倍像素比截取預覽區，適合社群媒體分享
- 富文字複製——將帶樣式的 HTML 複製到剪貼簿，可直接貼上到微信公眾號、Notion、郵件客戶端
HTML 匯出的典型使用場景
- 技術文件發布到個人網站或公司內網，不需要搭建 CMS
- 發給客戶或同事的技術報告，一個檔案搞定，無需任何軟體
- 在郵件中附上 HTML 檔案，對方直接用瀏覽器開啟
- 上傳到 GitHub Pages 或 Cloudflare Pages，幾秒內變成可存取的網頁
- 作為履歷或作品集的單頁展示，樣式精美，暗色模式自動適配
小結
Markdown 寫作的終點不應該是一個樣式混亂的 HTML 檔案。Design Token 驅動的主題系統讓每一個匯出的檔案都具備完整的排版體系。
Mark.build 的目標是讓這個過程盡可能簡單：寫 Markdown，選主題，點匯出。剩下的事情，交給工具。
立即體驗： 開啟編輯器 →