添加自定义CSS

by Typora.net
此功能要求Typora的版本晚于Windows的0.9.12或macOS的0.9.9.5.1

打开主题文件夹

打开首选项面板,然后单击“外观”部分下名为“打开主题文件夹”的按钮,将在Finder / Explorer中打开Typora的主题文件夹。 您将在此处添加自定义主题。如果要查找,安装或编写主题,请参阅“ 关于主题”页面 但是有时候,您可能只想修改CSS,例如更改字体或增加书写区域,并将其应用于所有主题或当前主题,而无需编写整个主题文件,本文档将向您展示操作方法。

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

Typora将按以下顺序加载CSS文件:
  1. Typora的基本样式。
  2. 当前主题的CSS。
  3. base.user.css 在主题文件夹下。
  4. {current-theme}.user.css在主题文件夹下。如果您选择Github作为主题,那么github.user.css还将被加载。
你可以创建base.user.css{current-theme}.user.css主题文件夹下,如果它们不存在。 如果要更改CSS样式并将其应用于所有主题,则应修改base.user.css并附加自己的CSS,因此无论选择了哪种主题,仍将加载并应用CSS样式。 如果要为特定主题修改某些CSS,例如“ Newsprint”,则可以创建newsprint.user.css并附加所需的CSS。我们不建议您直接修改主题文件的原因如下:
  1. 在安装Typora之后,可用的默认主题可能会在更新Typora的同时进行更新。默认主题的更新逻辑是:新版本的主题文件替换了主题文件夹下的现有主题文件,因此,如果将Typora放入默认CSS文件中,则所做的修改可能会在更新Typora之后消失。
  2. 其他人开发的主题将来也可能会更改。如果他们更改了CSS文件,则只需将其新文件替换为旧文件,而不必担心如果将它们放入其他文件({current-theme}.user.css)中所做的修改会消失。
但是,如果您使用自己的CSS主题,则直接对其进行修改也是可以的。 注意:{current-theme}in {current-theme}.user.css应与当前主题的文件名部分(区分大小写)相同。例如,“ GitHub”主题的CSS文件是github.css,因此文件名部分是“ github”而不是“ Github”。

调试CSS

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