Typora自定义主题

Typora自定义主题

前置知识

因为我们的markdown语法实际上是和html标签具有一一对应关系的。

所有Typora本质上只是一个将markdown语法转换html标签，再将html标签转换为可视化内容的浏览器。

而主题就是通过一个css文件来实现渲染样式的。

所以我们只需要编写一个属于自己的css文件就能够自定义一个属于自己的主题啦！

💻 必备的前置知识：HTML、CSS

📚 还不会的先去学一下再过来吧：https://www.runoob.com/

markdown与HTML之间一一对应关系如下表：

描述	markdown	HTML TAG
标题	# 一级标题 ## 二级标题…	h1,h2…h6
粗体	**粗体**	b , strong
斜体	*斜体*	em, i
分割线	---	hr
无序列表	* 1 - 1 + 1	ul
有序列表	1.	ol
引用	>	blockquote
超链接	[url](url)	a
图片		img
表格		table
代码段		code
段落	无特殊表示	p

这样我们就可以根据上表的对应关系来修改css当中对应的选择器了。

怎样写？

css的编辑器，很自然的就选择VS Code啦！

从零开始吗？

不，虽然你可以新建一个空白的css文件，从零开始写起。

但是我不建议这么做，我比较建议选取一个已有的主题，复制它的css文件，然后在里面做出自己的修改。

因为这样可以参考已有的选择器，会更加方便编写。

从已有开始

当然，你可以在Typora官网选择你喜欢的主题进行修改，但是这里我们选择的是Github主题进行讲解。

具体元素选择器

字体：

//这里会去网上加载字体文件
@include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);

//声明一种字体类型
/* open-sans-regular - latin-ext_latin */
@font-face {
   
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    //先从本地安装的字体中加载，本地没有才去指定url加载