← 返回部落格
產品更新

主題商店正式上線:為每位寫作者定製專屬主題

Mark.build 主題商店正式上線。探索精心設計的主題,在 Theme Studio 裡打造專屬主題,發布精美文章。


當我們推出 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 編輯模式和一鍵微信公眾號發布也在路線圖中。

感謝你的早期支持。


試用編輯器 → · 開啟 Theme Studio → · 瀏覽主題 →