← 返回博客
产品更新

主题商店正式上线:为每位写作者定制专属主题

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 → · 浏览主题 →