typora-theme/My-Typora-Themes-master
Kane Wang 62af62da36 创建样式库! 2022-04-08 15:49:45 +08:00
..
figure 创建样式库! 2022-04-08 15:49:45 +08:00
zj 创建样式库! 2022-04-08 15:49:45 +08:00
README.md 创建样式库! 2022-04-08 15:49:45 +08:00
g2.css 创建样式库! 2022-04-08 15:49:45 +08:00
zj.css 创建样式库! 2022-04-08 15:49:45 +08:00

README.md

My-Typora-Themes


[Update on 2021-07-24]

新增主题:G2

G2 就是 Github2 的意思,原主题看久了有点审美疲劳,所以在默认主题 github 的基础上捣鼓了一款新的主题,力求简洁,并且加上了标题自动编号(关闭代码行号效果最佳),字体文件夹则是沿用原来的 zj 文件夹。

QQ图片20210724140414


如果GitHub图片加载不出来可以去知乎看 https://zhuanlan.zhihu.com/p/133863913.

这是我写的一个Typora主题基本上是由 pieursine-polar 修改而来使用方法请参看Typora的帮助手册。

前言

Typora可谓是我最喜欢的Markdown编辑器了可惜其自带的样式实在过于简陋我到官网上把所有主题都下了一遍其中**少数派**的主题应该是最好康的了,可在我的电脑上显示出来有些怪怪的,最后还是忍不住动手修改了一遍,终于心满意足了。

以下是实际笔记效果:

img

img

img

字体

首先因为我感觉字体有点小就把正文换成了17号字体。

html {
    font-size: 17px;
}

然后修改了一下字体如果是Mac用户的话可以把下面第二行注释掉因为自带的苹方字体就很好看

body {
    font-family: "Vollkorn", Palatino, Times;
    /* font-family: 'Source Han SerifCN', Georgia, Times, 'SimSun', serif!important; */
    color: var(--mid-13);
}

标题

我认为标题可以说是整个样式中最重要的一部分,因为正文基本上都差不多。

img

一级标题一般对应一本书中的Chapter故局中表示。一般来说一个md文档中最好只有一个一级标题如果有内容包含多个章节的话则应该拆成多个md文档。

二级标题对应section因此带着一条长长的横线用来分隔。

三级标题是最常用的小标题subsection微信中只支持到三级标题在实际的短篇写作中一般也到此为止了。因此不宜花里胡哨要做到又显目又低调又精致又普通以及五彩斑斓的红与黑这段删去

四五六级标题一般用不到,随便糊弄一下就好了。

文本样式

img

对于行内公式,为了醒目和易于查找修改,我特意调成了蓝色(导出时依然是黑色)。

行间代码块则以简约的线条为主,用一条深红的竖线分隔行号与代码,显得很清爽。

因为中文的斜体作用几乎为0因此我把它改成了「显示红色」的效果。

引用块则是大块的淡红色。

列表与表格

img

把列表和表格都改成了符合主题的红色不知道为什么大部分笔记软件默认主题都是红色例如Notion

导出PDF优化

其实我很喜欢在写完笔记之后导出成PDF欣赏或分享给别人但typora导成PDF的样式和编辑时的样式区别很大因此我特意设置了一番。

人在看电子屏幕时,更喜欢无衬线体,能给人一种休闲轻松的感觉。

但在阅读严肃正经的内容时衬线字体更合适因此我将导出PDF的字体改成了宋体+TimesNew看起来更有感觉。

img

更新记录

2020年10月27日更新

  • 微调了列表排版

  • 微调表格颜色

  • 修改二级标题样式

  • 修复5级标题和6级标题没对齐的bug

  • 修改行内公式颜色为蓝色为了醒目导出PDF时仍为黑色

  • 修改超链接为蓝色样式

  • 优化了导出PDF的样式效果

    • 设置导出的中文字体为思源宋体,英文字体为Georgia

可以通过以下设置修改行内公式颜色和大小:

[md-inline='inline_math'] {
    color: blue;
    font-size: 100%;
}

注意在极少数情况下会出现PDF导出失败的问题等我吃完饭就来改这个bug


2020年10月28日更新

  • 调小了2,3级标题样式的大小
  • 默认导出PDF为宋体+Times New

导出PDF失败似乎是思源宋体的原因因此将默认输出样式修改之后就OK了。

如果导出字体过大可以搜索如下代码将下面第6行中的字体调小大概在原CSS的755行

在设置中把字体大小改成自动,否则打印字体大小就无法调节了

@media print {
    .typora-export * {
        -webkit-print-color-adjust: exact;
    }
    html {
        font-size: 15px!important;
    }
}