當我們推出 Mark.build 時,我們有一個判斷:寫作者不應該在「乾淨的寫作體驗」和「精美的發布效果」之間做取捨。我們驗證了這個想法——用 Markdown 寫作,匯出像素級精準的 HTML,即時切換主題。今天這次更新將這一切推向了更遠的地方。
本次更新內容
主題商店
主題商店上線多套精心設計的主題,涵蓋技術部落格、學術論文、雜誌和極簡寫作等風格。每套主題都同時定義亮色和暗色模式,並自動通過 WCAG AA 對比度檢測。
主題基於我們的 Design Token 系統構建——三層 Token(Primitive → Semantic → Component)將每一個渲染元素——標題、程式碼區塊、Mermaid 圖表、KaTeX 公式、表格、引用區塊——連接到同一套統一的色彩體系。切換主題,所有元素同步更新,包括 CodeMirror 編輯器本身。
Theme Studio
現在,有進階需求的使用者可以造訪 /theme-studio,從零開始設計自己的主題。三欄布局讓你左側編輯 Token,中間即時預覽 Markdown,右側查看 WCAG 對比度報告。每次修改都即時生效——無需構建,無需重新整理。
滿意後,複製 CSS 變數區塊或將其匯出為檔案。
編輯器改進
- 尋找與取代 — 按
Ctrl+H(或⌘H)直接在編輯器內開啟搜尋面板,支援正規表示式、區分大小寫、全詞比對。 - 文件大綱 — 可折疊的目錄面板即時解析你的標題層級,點擊即可跳轉到任意章節。
- 拖放匯入 — 將
.md、.docx、.pdf或.html檔案拖到編輯器上即可立即匯入。 - 純文字貼上 —
Ctrl+Shift+V在貼上前自動去除富文字格式。 - 清除格式 — 新增工具列按鈕,一鍵清除選取文字的加粗、斜體、刪除線和行內程式碼。
- 自動儲存狀態 — 狀態列現在顯示「儲存中…」和「已儲存」,讓你隨時了解文件狀態。
匯出改進
- HTML 匯出支援 Mermaid 圖表 — 匯出的 HTML 檔案現在包含渲染後的 SVG,而不是占位 div。輸出檔案不需要任何 JavaScript。
- 圖片匯出預設 — 圖片匯出對話框現在在觸發渲染前提供尺寸選擇,可選微信長圖、OG 封面、方圖或小紅書豎版預設。
文件管理
- 雙擊側邊欄中的文件標題即可內聯重新命名。
- 側邊欄頂部新增搜尋列,可按名稱即時篩選文件。
- 狀態列顯示預計閱讀時間和字數統計。
Design Token 系統——為什麼它很重要
大多數 Markdown 編輯器把換主題當作換樣式表。我們把它視為一套型別系統。每個視覺屬性——標題顏色、程式碼區塊圓角、Mermaid 節點背景——都是一個有名字的 Token。主題為這些 Token 聲明值,元件消費它們。結果是一套絕對不會漏掉任何元素樣式的主題體系。
同一套 Token 根據使用場景編譯到不同目標:編輯器使用 CSS 自訂屬性,剪貼簿匯出使用內聯 style 屬性(讓微信和郵件客戶端看到正確顏色),Mermaid 使用 themeVariables。
下一步計畫
即將推出:macOS 的 Tauri 桌面端——本機檔案管理、離線優先、安裝包小於 10MB。WYSIWYG 編輯模式和一鍵微信公眾號發布也在路線圖中。
感謝你的早期支持。