魔改Typora主题的经历（需要主题文件可私信我）

Typora的官网上有提供了一些主题（https://theme.typora.io/）。除了官网的theme gallery以外，也尝试过少数派等平台提供的主题文件。但是不论是哪一款theme，总会有一两个不是很称心如意的地方。

列如想要用Typora来写课程论文（不会用LaTeX，目前感觉Word进行排版是最万能的，不过挺花费精力），却没有使用宋体和Times New Roman的主题；表格的形式也不符合学术风格。而在自己平时写笔记的时候，会想着用一些长在自己审美点上的主题。用一个好看的标题风格，甚至给界面添加一张图片。于是逐渐走上了魔改Typora主题文件的不归路……

Typora的主题文件是用css文件写的。我对css可以说一窍不通，所采用的方法基本就是网上查教程+尝试修改文件代码。许多工作仅仅是不同主题文件之间对应代码块的搬运。其中可能有许多冗余或者无效的内容，希望懂行的大佬轻喷orz

一、课程论文模板

代码主体是github主题。修改了高亮的背景色（原来的亮黄色饱和度太高了，看久了会不舒服），中文字体是宋体，英文字体是Times New Roman。导出PDF正文字号为13px（相当于中文四号和小四之间）。表格换成横线条形式，和实验数据表一样。

1. 修改文本高亮背景色
绝大多数主题文件的高亮都是默认亮黄色的。这种只要用记事本打开主题文件，在末尾加上这段代码就可以了。

mark {
    background: #BBFFFF;
}

其中BBFFFF是十六进制RGB代码，你可以自己挑选一个颜色，然后将这个颜色的代码替换进去。

如果文件已经有形如mark{...}这样的代码了，删掉之后再输入自己的代码。

2. 修改文本字体

记事本打开主题文件，ctrl+F打开搜索框，输入“font-family”。然后将每一处冒号后面都替换成自己想要的字体。举例其中一处修改：

@font-face {
    font-family:  Times New Roman ,宋体;
    font-style: normal;
    font-weight: normal;
  }

如果中文和西文的字体要求不一样，用逗号隔开两种字体就可以了。

3. 修改字号

css语言中定义字体大小有两种单位：一种是rem，一种是px。前者是相对大小，即这种字体相对于基础字号的大小。后者是绝对大小。

这里修改字体只是为了导出成PDF后来的格式需要，所以只在@media print里面修改字号就好了；代码主体里面的font-size改变的是Typora编辑器界面上显示的字号大小，这个以观看的舒服程度为准就好了。

html {
    font-size: 16px;  ## 这里是编辑器显示的字号
}
… …
@media print {
    html {
        font-size: 13px;   ## 这里是导出文件里的字号
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}

二、日常笔记模板

代码主体是sspai，这份主题已经很接近我心中完美的风格了。二级标题和引用文本是sspai主题的高光点。

存在缺陷：

• 原本主题的表格没有边线，内容一旦较长，相邻两列的文字就会贴得过紧
• 图片缩放功能似乎没有？
• 正文占据整个屏幕的宽度，阅读起来有一点吃力
• 高亮文本依然是糟糕的亮黄色

从github模板里面植入了一些代码块过来后来，这些缺陷就消失了。

1. 更改表格

将代码里面形如table{...}的全部删去，替换成github主题里面的代码块：

table {
    padding: 0;
    word-break: initial;
}
table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n),
thead {
    background-color: #f8f8f8;
}
table th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
}
table td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}
table th:first-child,
table td:first-child {
    margin-top: 0;
}
table th:last-child,
table td:last-child {
    margin-bottom: 0;
}

2. 图片缩放

查了资料后发现是我自己搞错了。并不是sspai没有图片缩放功能，而是sspai设定图片必须为100%的缩放率呈现。相比之下github的代码反而十分简单粗暴。由此推测平时用Typora的时候，图片缩放都是由软件自己控制的。而sspai的代码接管了软件的这个功能。所以说，把图片有关的代码块替换之后就重新可缩放了。

figure {
    margin: 1em 0;
}
figcaption {
    font-size: 0.75em;
    padding: 0.5em 2em;
    margin-bottom: 2em;
}
figure img {
    margin-bottom: 0px;
}

添加图片背景

给自己的github主题增加了图片背景。

先在主题文件夹的路径里面准备好图片，然后在文件的:root{...}里面添加一行代码就可以了。这里调整图片的相对位置花了我很长时间，由于每次都需要改完代码后重开软件才能查看。

:root {
    --side-bar-bg-color: #fafafa;
    --control-text-color: #777;
    background: url(./image/image2.png)  -10px 0px no-repeat;  ## 添加的一行
}

最后一行中，url(./image/image2.png)是图片路径，放在主题文件下的话只要写相对路径就行。-10px 0px是图片左上角的相对位置（横轴坐标+纵轴坐标），可以多输入几次数值查看效果。no-repeat指图片不重复，没有尝试过其他类型。