Typora进阶-个性化样式&自动上传图床

Typora进阶-个性化样式&自动上传图床

今天，数据猿为大家展示Typora的进阶操作方式，让你的Markdown文件美起来，写得更加快一点！

目录如下

个性化样式

Typora是非常优秀的Markdown工具，这个我们在【Typora图片/文字的使用和简单处理——基于html】已经表达清楚，不再赘述。

我们平时会看到很多非常有个性的Markdown博文，比如Typora官网展示的这些主题样式，均极有个性。

上次我们知道Typora的语法很多和HTML、CSS有关系，那我们就可以通过修改显示的文档CSS样式，就可以得到自己定义的Typora主题了。

下面，就通过动图演示一下如何通过下面几个步骤修改主题

找到并打开样式文件

文件-偏好设置-外观-打开主题文件夹-github.css（或者任选一个主题为基础模板）

数据猿是通过Dreamweaver打开的，其实也可以通过笔记本打开，甚至Pycharm都可以。

我们会发现，CCS代码和Office的概念有些相似，比如padding(内边距)、h1-h5(1-5级标题)等，说明这些概念在CSS中都是相通的。这样我们就有了初步思路——找到Typora的文本中的各个对应主题样式，调整其参数。

如何定位文本中的各个样式呢？

定位文本具体样式

文件-偏好设置-通用-开启调试模式

然后我们打开所编辑的文本，鼠标右键，就会发现多了一个检查元素的选项。

点击进去，就会发现和浏览器中打开检查元素的效果一样，都可以得到一个网页调试窗口。

这个时候我们稍微用到之前爬虫时学到的定位网页元素的知识，就可以定位到文本所载内容的样式名称了。

案例：修改表头背景色

例如，我们想要修改表格的表头背景色

• 复制表中的文本，比如 C级别

• 鼠标右键，打开检查元素

• ctrl+f 查找 C级别

• 定位到表格中的C级别 字样 ，发现它在table tr th中

定位到了位置，我们就在CSS文件中查找table tr th，然后在其大括号(作用域)内增加background-color(背景色)的参数。

修改后保存，然后重新打开一个Markdown文件，然后选择新的主题样式

主题-github (或其他已修改样式)

这时就会发现主题已经改变了。

我们可以用以上方法来修改Typora中的绝大多数格式。比如行间距、页面边距、列表边框、引用表框(blockquote)等等。

小结：

修改Typora的主题样式，主要是以下三个步骤

1. 找到模板CSS主题样式

2. 定位所要修改的文本位置

3. 修改相应位置的CSS参数

利用gitee自动上传图床

新版的Typora0.9.84增加了自动上传图片到网络的功能，简直不要太给力，网易云笔记等又少了一个比较优势。但是不太方便的是，需要比较麻烦的配置才能实现自动上传图片。

首先，需要一个存储Typora图片的图床工具，目的是让文本中的本地图片成为一个网络图片。

其次，需要建立Typora与此图床工具的通信。

先说如何让Typora与图床工具通信呢？Typora设置了这么几个接口

根据其官方文档的解释，主要有三种方式

第一种，PicGo-Core的服务，需要下载语言程序Node.js和及其库picgo；

第二种，PicGo(app)的服务，需要下载PicGo此应用程序，仅中文环境可以（不免感到开心，中文环境特殊照顾的还真不多）；

第三种，使用者自己开发的连接图床服务工具。。。。。略去不表

数据猿看到这里，果断不去下载一个应用程序，而是选择一个类似python的软件。。。。。

下载node&picgo

在cmd中如下输入，

# 设置仓库为淘宝的，这样下载速度就会比较快
C:\Users\rui>npm config set registry https://registry.npm.taobao.org

# 安装 picgo-core
C:\Users\rui>npm install picgo -g

同时需要下载一个gitee的插件

# 安装 gitee-uploader 插件
C:\Users\rui>picgo install gitee-uploader

之所以选择gitee（码云），是因为这个平台就相当于国内的github，最大的好处是处于中国局域网，速度快。其他的图床工具如七牛云、腾讯云就不介绍了，这些都过于繁琐，不适用文科生的项目管理。

码云工具人石锤…

检验各自是否安装成功

# 检验是否装上了node
C:\Users\rui>node
Welcome to Node.js v14.2.0.
Type ".help" for more information.

# 检验是否装上了picgo
C:\Users\rui>where picgo
C:\Users\rui\AppData\Roaming\npm\picgo
C:\Users\rui\AppData\Roaming\npm\picgo.cmd

如上所示，即两个都已经安装成功

gitee仓库配置

数据猿在这一个步骤耗费了很多时间。主要是不熟悉github为代表的仙姑托管平台的基本操作。

这里，就需要我们

1. 登录 Gitee ，创建一个仓库
2. 仓库需要公开的，保证图片可访问。
3. 同时要创建一个仓库的私人令牌。在个人中心 安全设置 私人令牌 中创建
4. 仓库有两个分支：master 和pic。

数据猿在这里，由于不会创建分支，走了很多弯路。其实创建分支，就只需要将仓库代码克隆到本地，然后通过本地修改其中一个文件，新生成一个分支(branch)，再提交到仓库即可新生成一个分支branch。

picgo相关配置

文件-偏好设置-图像-插入图片时上传图片

上传服务设定- PicGo-Core -打开配置文件

这就打开了 config.json 文件，修改为如下内容

Copy{
 "picBed": {
   "current": "gitee",
   "uploader": "gitee",
   "gitee": {
     "branch": "pic", // 图片上传到这个分支
     "customPath": "",
     "customUrl": "",
     "path": "2020/", // 路径
     "repo": "Riggle/picbed", // <用户名>/<仓库名称>
     "token": "34097jy0142b71233134569baadeac247" // token 令牌
  }
},
 "picgoPlugins": {
   "picgo-plugin-gitee-uploader": true
},
 "picgo-plugin-gitee-uploader": {
   "lastSync": "2020-05-18 22:43:23"
}
}

然后设置Customer Command

文件-偏好设置-图像-上传服务-Customer Command picgo upload

这时，保存设置，打开一个Markdown文件，如果不能自动上传，则去系统环境变量中添加picgo的path，添加环境变量的方法我们之前已经出过教程，此处不再赘述，详见推文【文科生快速入门python(四)python、jupyter、pip的安装和环境搭建】。

小结：

Typora的图床设置，看似非常麻烦，实际上只有两个步骤

1. 找到上传图片到图床的依赖程序

2. 配置环境和参数

如此，我们的Typora，就是一个非常好用且免费的开源工具了。

这样的良心编辑器不多了，大家快点入手吧！没准什么时候它就收费了！

往期精品：

怎样把地球装进电脑里？

7个比Sci-Hub还牛的免费下载英文文献的方法

从开题报告到毕业论文，这 16 个工具帮你顺利毕业

你见过哪些Jupyter Notebook骚操作

文科数据员交流群来了，一起撸代码和量化研究方法吧！

参考资料：

个人博客「源来是这样」

https://www.cnblogs.com/readiay/p/12846944.html

**文字编辑：**数据猿Riggle

==&mid=2247484070&idx=1&sn=4a6d3408f578aba36d4233b6362aa0d0&chksm=ec47284bdb30a15deb8ed97955d283434270f86f54e63a47b90a9226484ad8e3b592b58841e8#rd)

参考资料：

个人博客「源来是这样」
https://www.cnblogs.com/readiay/p/12846944.html

文字编辑：数据猿Riggle
本文首发于vx公众号：文科数据员