预览主题

Markdown 预览窗格在 MarkNode 中可以使用不同的主题来设置样式。你可以选择内置外观、让预览自动跟随应用主题,或者编写自己的 CSS,以匹配文档将要发布的场景。

跟随应用主题

预览默认设置为跟随应用主题:它会使用与你当前应用主题相配的内置样式,因此当你从 Paper 切换到 Midnight(或任何其他主题)时,一步操作即可让预览重新着色以保持一致。除非你想要与应用其余部分不同的外观,否则完全不必单独挑选预览主题。

内置主题

MarkNode 随附一组面向所有用户的内置预览主题。它们是只读的,无法修改,但你随时可以复制其中一个作为自定义主题的起点。除了与各个应用主题相配的样式(Paper、Midnight、Sepia、Nord、Solarized Dark、High Contrast)之外,还有针对特定发布场景和风格的外观,例如:

  • GitHub LightGitHub Dark —— 适合文档的 GitHub 风格渲染
  • Solarized LightSolarized Dark —— Solarized 配色方案
  • Serif —— 适合长篇文章的居中衬线栏
  • Compact —— 适合密集参考资料的紧凑布局
  • AcademicNewsprintDracula 等等

内置主题的基础背景色、文字色、链接色和边框色均取自你当前启用的应用主题,因此无需重新挑选,它们在浅色和深色下都能呈现合适的效果。(还有一个内部的 Default 样式为跟随应用主题提供支持;在菜单中你应选择跟随应用主题,而不是直接选择 Default。)

要切换主题,请点击预览窗格标题栏中的预览样式按钮,或在预览中任意位置右键点击并使用样式列表。选择跟随应用主题可重新跟随应用主题,或选择任一具体样式将其固定。更改会立即应用到所有预览界面 —— 包括编辑器旁边的停靠预览以及你已取消停靠的任何预览窗口 —— 并会在会话之间保留。

创建自定义主题

在预览样式菜单中,选择基于此样式新建…,即可基于当前启用的主题创建自定义主题:

  1. 为新主题输入名称。名称不能与内置主题重名。
  2. CSS 编辑器打开,并预填了源 CSS —— 按你的喜好进行编辑。

在你输入时,预览会实时重新渲染。CSS 在保存之前一直保存在内存中,因此你可以放心尝试;如果改变主意,关闭编辑器即可放弃编辑。

要编辑你已创建的自定义主题,请选中它并在同一菜单中选择编辑当前样式…

保存与共享

保存自定义主题时,它会被存储到你的全局主题库中,因此在本机的每个项目中都可以使用。你也可以勾选在当前项目中保存副本,将其写入项目,这样主题就会随项目一起流转。如果你将项目提交到 Git,每位克隆该仓库的协作者都会看到相同的预览效果。

当你打开的项目包含一个你尚未拥有的自定义预览主题时,只要该项目处于打开状态,该主题就会出现在你的样式列表中。

自定义 CSS 可以设置哪些样式

自定义 CSS 的作用范围限定在预览容器(.markdown-preview)内,因此不会影响编辑器、侧边栏或 MarkNode 的任何其他部分。你可以设置:

  • 正文字体与字号
  • 标题、列表、引用块和表格
  • 代码块、行内代码以及语法高亮颜色
  • 间距、内边距以及内容最大宽度

如果你希望自定义主题能像内置主题那样自动适配浅色和深色,请从复制一个内置主题开始 —— 你的副本会继承那份主题感知的基础样式,你可以在此基础上进行调整。

由于 CSS 只能调整视觉呈现,而无法改变底层 HTML,因此无法进行大幅度的 DOM 结构重组。

删除自定义主题

选中一个自定义主题,在样式菜单中使用删除操作。系统会先显示确认提示。如果你删除的是当前启用的主题,MarkNode 会回退到默认的内置主题。内置主题没有删除操作,也无法被移除。