添加自定义 CSS

提示

该功能要求 Typora 在 Windows 上的版本超过 0.9.12，在 MacOS 上的版本超过 0.9.9.5.1。

打开主题文件夹

要在 Finder/Explorer 中打开 Typora 的主题文件夹，请打开外观部分的偏好设置，点击 "外观" 部分中的 "打开主题文件夹" 按钮。

你可以在这里添加你的自定义主题。如果你想寻找、安装或编写主题，请参阅 About Themes page (opens new window) 。

但你可能只想修改 CSS，比如改变字体或增加书写区域，并将其应用于所有主题或只应用于当前主题，而不需要编写一个全新的主题文件。本节告诉你如何做到这一点。

将自定义 CSS 附加到所有主题或其他主题上

Typora 将按照以下顺序加载 CSS 文件。

1. Typora 的默认主题
2. 当前主题的 CSS
3. 在主题文件夹下的 base.user.css
4. 在主题文件夹下的 {current-theme}.user.css

你可以在主题文件夹下创建 base.user.css 和 {current-theme}.user.css，如果它们不存在。

如果你想改变 CSS 样式，并将其应用到 all themes，你应该修改 base.user.css，并附加你自己的 CSS，这样无论选择什么主题，你的 CSS 样式仍然会被加载和应用。

如果你想为 a specific theme，例如 "Newsprint "修改一些 CSS，你可以创建 newsprint.user.css，然后附加上你想要的 CSS。我们不建议你直接修改主题文件的原因是。

1. 安装 Typora 后可用的默认主题也可能被更新。如果发生这种情况，那么新的版本将简单地取代主题文件夹下的现有版本，而你的修改将丢失。
2. 其他人开发的主题在将来也可能会被改变。如果他们改变了他们的 CSS 文件，你可以直接用你的旧文件替换他们的新文件，不用担心你的修改会消失。

(如果你自己写了 CSS 主题，那么直接修改它也是可以的)。

注意

文件名是区分大小写的。{current-theme}.user.css 中的 {current-theme} 必须与当前主题的文件名部分相同。例如，"GitHub "主题的 CSS 文件是 github.css，所以文件名部分是 "github "而不是 "Github"。

调试 CSS

你可以打开 Chrome/Safari DevTools 来调试元素样式。

• 在 macOS 上，你可以检查 帮助 -> Enable Debug 菜单项，然后在 Typora 的混合编辑视图的任何地方点击右键，然后从上下文菜单中点击 "检查元素"。
• 在 Windows/Linux 上，你可以从 View -> Toggle DevTools 菜单项打开 DevTools。