发文效率提升300%的保姆级教程，手把手教你利用Typra配置六大图床，码文无缝衔接
11月26日 - 12月24日，分享我的知识地图，千元京东e卡等你来拿！参与#我的知识地图#征稿活动，发文就有100金币，千元京东卡等你来拿！点击查看活动详情。值友的理想生活栏目已上线，点击查看值友们缤纷的理想生活。「活动由京东商城冠名」
创作立场声明：本文首发于什么值得买。使用经验分享，希望能对你有所帮助，有问题欢迎指正，期待深入交流~~
写在前面
还在为排版而痛不欲生？
还在一个一个的添加标题？
还在一张一张的给文章配图？
是不是写文章都没有欲望了？
上篇文章写的是 Markdown 语言和 Markdown here渲染，也就是已经有一篇文章之后如何实现最终效果。这些是不错的一些渲染效果，供大家选择。
本文书接上回，接着解决下面这些问题：
实现像写word一样写文章，最后还能获得Markdown 代码文本。
拖拽插入图片，后面样式化时可以直接拉取图片到富文本编辑器。
本文重点讲的软件就是Typora，神一样的软件，没有之一。
Typora是一款支持实时预览的 Markdown 文本编辑器，简单来说就是富文本编辑和markdown语言都可以。有 OS X、Windows、Linux 三个平台的版本，是完全免费的A truly minimal markdown editor。Typora官方下载
1.像word一样书写Markdown
首先，选用这款编辑器最大的原因是人性化，用着超级舒服。
其次，操作方便，就是不会markdown语言也能按照word的方式进行书写。
一般 Markdown 编辑器界面都是两个窗口，左边是 Markdown 源码，右边是效果预览。有时一边写源码，一边看效果，割裂感很强。
Typora将预览框和编辑框整合在一起，在同一个界面 可以实时的看到渲染效果，所见即所得。
比如下面这个图默认模式下，是显示富文本模式的，就是渲染后的效果。
也可以查看源代码模式：
会自动识别为预览模式，可以看到实际渲染的效果。 也就是说一次编辑可以同时得到markdown语言的文本和富文本模式的文本。
很多朋友好奇了，虽然是富文本格式但是看不到富文本编辑器的工具栏，大部分常用的设置，通过右键设置。
全部的功能在上方的『段落』和『格式』选项内设置，为何不设置工具栏的原因是，很多快捷操作可以通过键盘来实现。下面看下如何通过快捷键来设置格式。
2.快速设置格式
①标题设置
标题在Markdown内是通过#+空格，来控制的，#+空格是一级标题，##+空格是二级标题，以此类推，Markdown下增加标题，可以通过输入实现，也可以通过快捷键设置。
用过很多markdown编辑器，Typora通过快捷键设置标题这一手，是最漂亮，效率最高的。选中文字，ctrl+数字可以实现标题快速设置。
ctrl+1就是一级标题
ctrl+2就是二级标题
ctrl+3就是三级标题
ctrl+4就是三级标题
ctrl+0就是段落（正文格式）
ctrl+= 标题升级（用的比较少，大部分通过ctrl+数字调整）
ctrl+- 标题降级（用的比较少，大部分通过ctrl+数字调整）
注意敲重点：
张大妈的目录中的一级标题对应的是Markdown语言中的二级标题，只有二级标题能在值得买平台文章的目录中显示，所以在码文的时候直接从二级标题开始设置。
②其他格式
我们原来在使用word时候记住的快捷键仍然是通用的，比如：
CTRL+B 加粗
ctrl+I 斜体
ctrl+U 下划线
ctrl+K 超链接
ctrl+ 清除样式
ctrl+shift+Q 引用
ctrl+shift+[ 有序列表
ctrl+shift+] 无序列表
ctrl+Z 撤回（返回上一步）
ctrl+F 查找
ctrl+H 替换
alt+shift+5 删除线
重点来了：
ctrl+K 超链接设置，这个快捷键超级方便的，在码文的时候经常需要设置超链接，或者取消超链接，都是通过这个组合键来实现，选中超链接或者把光标放到超链接上，按下ctrl+K 超链接取消。
设置超链接，复制网址之后，回到Typora内选中文字，然后同时按下ctrl+K，就会自动设置好超链接。
3.拖拽上传图片
图片排版最痛苦的就是上传图片了。各个自媒体平台的编辑器至今仍然是富文本编辑器，虽然是可视化操作，但是效率不高，尤其是插入图片功能就显得有点麻烦了。
插入图片，需要打开插入功能，选择图片，然后上传。经常写一篇文章要插入几十张照片，甚至上百张，一个动作要反复重复，并且容易打断思路。
①支持直接拖拽上传，插入到文章里。
②支持粘贴板直接粘贴，插入到文章里。平时我们截图软件，截图后会保留在粘贴板内，只要在Typora粘贴就可以插入到文章里了。
这里懒得录屏了，就找个官方的图片感受下效果：
上面两个方法，插入图片，只是把图片插入到文章，但是图片还是在本地，没有上传到图床，如果平时自己写点小文章，总结，可以使用
在『文件』——『偏好设置』——『图像』，可以设置图像保存的地址，如果本地应用，只要设置把文章图片统一放到一个文件夹就OK了。，如果想在平台发布，还需要上传到图床。这部分放到图床配置那里再说。
4.添加表格
富文本编辑框下，是一般是无法添加表格的，利用markdown语言可以实现表格的效果，尤其是写作清单类的文章，需要添加链接，加入表格可以使文章可读性更高。
右击——『插入表格』，弹出表格插入对话框，和word使用方法差不多，设置几行几列。
| 表格示例 | ||
|---|---|---|
在表格上右击，选择表格就可以进行基本设置了。输入内容和word相似。
5.大纲视图
此功能也是很方便的一个功能，可以随着写作随时查看文章结构。
一二三级标题都可以看到，可以及时调整文章目录和写作思路。
遗憾的是不能像word一样拖动大纲调整文字顺序，不过可以快速定位和查看文档结构就够用了。
6.自定义主题
主题模式是可以直接下载（官方地址）和自定义的。这个主题相当于皮肤的功能，在这里写完的只是Markdown纯代码文本，配合上篇文章里用Markdown here 做CSS渲染之后才可以产生想要的效果。
①安装主题
主题文件夹可以在文件——偏好设置内——外观内设置打开。
在主题地址]下载主题之后，解压然后复制到主题文件夹即可。没有任何难度。
安装完成后，在主题工具栏，就可以随意切换了。
②自定义主题
为了方便的观看，将来产生的效果，建议大家把自己将要渲染的效果，做成主题效果，这样可以随时观看到自己文章的最终效果。
把上文中的markdown here css代码放到TXT文件中，然后修改后缀名为.css，然后复制到这个文件夹中就可以使用了。想用什么视图格式可以自己进行调校。也可以借助这种方式，对调校的CSS代码进行初步效果验证。
主题如果未显示在主题菜单栏中，或者选择后未更新主题。原因可能是.CSS文件名包含大写字符或空格。请更改为小写 + 连字符，例如my-typora-theme.css。
敲重点：修改现有主题（修改前一定记得备份，世上没有后悔药，搞坏了，得重新折腾）
简而言之，如果主题是自己创建的，则可以直接对其进行修改。前面讲过后缀名字改成了.CSS，依然可以用txt打开进行修改，修改的方法和CC渲染代码是一样的，代码的效果的解读参照上一篇。
可以在这里对段落、字体大小间距，段距、段落方式进行修改
这里可以修改标题的格式，以匹配自己的写作和阅读习惯。
如果主题是 Typora 内置的，或者是从网站下载的，如果要修改，建议最好在附件上修改，然后再重命名一个文件，当打字错误或主题文件更新时，这些文件将不会被覆盖。可以将修改内容放入：
base.user.css 在主题文件夹下，其中的 css 规则将应用于所有主题。
{theme-css-name}.user.css，则其中的 css 规则将仅应用于主题文件{theme-css-name}.css。
如果文件夹不存在可以自行创建，添加自定义 CSS。
7.安装Pandoc导入导出文件
导入文件就比较简单了，可以通过导入，快速生成文章，也可以通过复制粘贴来实现，这个就不多多说了。
平常写完之后是可以导出pdf和html格式，但是要导出某docx，odt，rtf，epub，LaTeX和Wiki就需要安装Pandoc支持。安装Pandoc之后，您可以通过从菜单栏中单击“文件”->“导入”来导入支持的文件类型，或者直接将文件拖放到Typora中。
Pandoc支持导入的文件有下面这些类型：
.docx
.latex
.tex
.ltx
.HTML
.rst
.rest
.org
.wiki
.dokuwiki
.textile
.opml
.epub
最重用的类型就是.docx；.HTML；.pdf；.epub。
.docx：导出的word格式是不带渲染的，但是带图片
.pdf：格式是带渲染的，当前主题（皮肤）下设定好的效果
.HTML：格式是带渲染的，当前主题（皮肤）下设定好的效果
epub：是电子书格式，是不是忽然发现，竟然还可以通过typora制作电子书，然后导入kindle阅读。
安装方法：
在Typora中，某些文件格式（包括docx，odt，rtf，epub，LaTeX和Wiki）的导入和导出功能由名为Pandoc的第三方软件提供支持。这些功能需要安装Pandoc（≥v1.16）。Pandoc的安装是可选的，如果不需要Typora中的高级导入/导出支持，则不必在计算机上安装Pandoc。安装和使用Pandoc参考方法
五、图床配置
先把各图床配置代码使用的名称放到这里，下面使用命令行上传图片的时候会用到。
smms -> SM.MS
tcyun -> 腾讯云COS
upyun -> 又拍云
aliyun -> 阿里云OSS
qiniu -> 七牛云
imgur -> Imgur
weibo -> 微博图床
github -> GitHub
拟实现的效果：
上面讲过了拖拽插入图片，但是图片是存在本地的，无法被平台富文本编辑器读取。下面这样，插入的图片保存在本地：
复制上面的文章到张大妈的富文本编辑框，发现图片没有被上传，也就是说图片存在本地，张大妈的编辑框是无法拉取图片到张大妈的服务器的。
我们开启上传图片功能：
图片的链接变成了网络图片：
再复制粘贴到张大妈文本框，就可以看到正在拉取图片：
图片拉取成功，且自动上传到平台了。
简单解释下图床
图床就是一个第三方存储图片的地方，借助 typora图床功能，我们可以实现将图片拖拽或者粘贴到文章中，可以直接返回图片的URL，并且自动生成markdown格式文本，这样就大大简化了图片的上传和设置。
常用的图床有七牛云、SM.MS、腾讯云、阿里云等等。七牛云和SM.MS。
typora配置前准备
1.确保 typora 的版本在 0.9.86 以上，这个版本开始增加了图片同步返回功能。
从下图看看出，当插入图片我们选择上传功能后，上传服务设定出现了PigGo-Core（command line）、PigGo（app）和Custom command三种上传模式。 上次有一期文章文章讲到过了如何使用PigGo-Core（command line）上传，很多小伙伴对这个代码设置，使用起来感觉比较繁琐。这一期在回顾命令行上传的同时，补上PigGo（app）上传设置。
PigGo（app）支持如下图床：
七牛图床 v1.0
腾讯云
又拍云
GitHub
SM.MS V2
阿里云 OSS
Imgur
PigGo（app）上传就十分简单了，采用可视化设置，配置很简单，使用很方便。
1.首先安装PicGo软件
下载软件，也可以去PicGo官网可以去了解下基本功能，打开PicGo下载地址下载软件，虽然tpora内置了picgo下载，建议还是下载一个独立版本。
下载下来，安装：
无脑点击安装前，记住这个安装地址：
配置路径：
打开typora的偏好设置，选择上传图片。
对网络位置的图片应用上述规则，这里不要勾选，因为我们后面会把图片传到张大妈服务器后，再复制回来进行二次排版，勾选这个功能，会把张大妈服务器的图片再次传到图床里面。
选择PigGo（app）：
然后配置路径，点边上黑色的小文件夹选项，在电脑里找到刚才安装的位置，选择picgo程序就可以啦。
到这里Typora的配置暂告一个段落，进入PicGO内部配置。
配置PicGo
打开PicGo，图床选择七牛图床，可以看到要这些参数，带着这些问题进行下一步：
2.七牛图床配置
①七牛云优点
七牛云存储，是需要一定门槛的，就是需要有自己的域名，现在申请一个域名也是比较简单的，七牛云是不提供域名的，且要求必须绑定域名才可以使用，为了码文的方便快捷，注册一个域名还是很有必要的。
值得买平台上经常有大神科普免费得域名的方法，搞个垃圾的域名，能用就可以了，要求不高。
七牛云是性价比最高的，认证用户十每个月10G免费存储空间，下载流量10G，用于码文的过程中过渡一下当图床，足够用了，如果这个不够用了，再注册一个七牛云账户用就好了。
关于存储空间方面10G也是够用的，七牛云的照片经过七牛云的瘦身只有几百kB，图片瘦身费用也是比较划算的，一千次一毛钱，随便往里面存入几块钱就够用了。
懒得注册的话，费用也可以接受的，毕竟带来很多方便，节省下来的时间和精力多码几篇文章就出来了。
标准存储费用：
标准存储，前10G是免费的，从第二个 10 GB 开始计算费用，10G至 1 TB区间，价格是0.145元/GB/月，对于图片来说，100G足够用了，用到100G也就14.5元/月。
②七牛云的PigGo（App）配置
准备工作，注册七牛云账号，并实名认证，这个实名验证非常快，大概是机器识别做的验证。访问链接。
点击首页的对象管理，新建空间：
这里注意下自己选过的存储区域，以及对应的地域简称。在配置文件里，存储区域对应的键是area，值是下图所示，比如华东的话就是z0。
在存储空间里可以看到这些信息，留到下面配置使用：
设定上传地址是自己绑定的域名，注意要加http://或者https://
域名在绑定时候需要配置域名的 CNAME，具体可以参考这里，如何配置域名的 CNAME
对应的密钥信息需要到七牛自己的控制台里找到，鼠标选择人头，选择密钥管理：
然后在密钥管理中可以找到AK和SK。AccessKey/SecretKey，复制出来，没有的话点击创建一个密钥。
将上面这些信息填入对应的窗口，点击确定，并设置为默认图床：
回到Typora里打开偏好设置——图像，测试一下，配置成功了，可以直接使用插图了。
记得打开一个功能：时间戳重命名，上传图片久了之后，难免会遇到重名的文件，打开此功能，会自动重命名，避免还需要自己手动改名的情况。
③七牛云的PigGo-Core配置
七牛云还有一种配置方式就是PigGo-Core（command line），在Typora里打开偏好设置——图像——选择PigGo-Core（command line），打开配置文件。
把下面这段代码复制到配置文件内，我们对照参数开始配置：
{
“picBed”: {
“uploader”: “qiniu”,
“qiniu”: {
“accessKey”: “”,
“secretKey”: “”,
“bucket”: “”, // 存储空间名
“url”: “”, // 自定义域名
“area”: “z0” | “z1” | “z2” | “na0” | “as0”, // 存储区域编号
“options”: “”, // 网址后缀，比如?imgslim
“path”: “” // 自定义存储路径，比如img/
}
},
“picgoPlugins”: {}
}
在配置文件里，存储区域对应的键是area，比如华东的话就是z0，华北z1，华南z2，北美na0，东南亚as0。
点开 typora，验证图片上传功能。当看到下面的页面的时候，就已经配置成功了。可以直接拖拽照片直接插入了。
Typora在插入时自动上传图像（包括从菜单，触摸栏，通过复制和粘贴或拖放插入图像），要启用此功能，请在“插入时…”下选择“上传图像”。
小结：整个流程下来七牛云两种配置方式就介绍完了，PigGo-Core（command line）和PigGo（App）配置两者的区别是，前一种不需要保持开启PigGo，因为采用代码配置可能比较麻烦容易失败。后一种配置方式需要保持开启PigGo，配置简单。
2.sm.ms图床配置
①sm.ms的PigGo(App)配置
sm.ms图床也是使用比较多的图床。免费的还算良心，5G的自由存储空间，每个文件最大5 MB，每分钟最多上传20张，每小时限制100，每天限制200张上传量，每周限制500张，勉强够用。
好处是不需要个人域名，这样用起来算是门槛比较低了。对于码文来说勉强够用，如果存储量快满了，就要及时清理。
配置比较简单，只要修改一个API密钥就可以了：密钥后台
只要将API密钥复制过来就可以使用了，设置成默认图床，typora就可以自动切换了，所以每次都要在PigGo里设置默认图床，typora才会切换。
插入图片之后看到自动返回了了网页地址，并转译成了markdown语言。
在图床后台也看到了刚才我们插入的图片。
②sm.ms的PigGo-Core配置
还是参照上面七牛图床的配置方法，在配置文件里面将”token”替换掉就可以了。
{
“picBed”: {
“uploader”: “smms”, // 代表当前的默认上传图床为 SM.MS,
“smms”: {
“token”: “输入你的token” //一定要换这里面的token换成你上个页面的申请的token
}
},
“picgoPlugins”: {} // 为插件预留
}
测试完成
3.腾讯云配置
①腾讯云的PigGo（App）配置
腾讯云不需要个人域名就可以使用的，一般的配置需要下面这些参数值：
在API密钥管理按照对应的提示找到自己的SecretId、SecretKey、APPID，登录腾讯云控制台，打开密钥管理，就可以看到了，复制出来。
在存储桶列表可以找到存储的空间名和所属区域，比如这个属于南京，ap-nanjing
在配置页面输入这些信息就可以了：
验证一下，图片上传成功。
图片上传成功了。
可以看到腾讯云服务器里也有了这张图片。
②腾讯云的PigGo-Core配置
腾讯云的PigGo-Core（command line）配置和上面的差不多，打开偏好设置 ，这里更改之前一定要把前面配置好的配置备份。
先把下面的这些代码复制到配置文件内，如果有空白行，可以删掉
{
“picBed”: {
“uploader”: “tcyun”, // 代表当前的默认上传图床为腾讯云,
“tcyun”: {
“secretId”: “”,
“secretKey”: “”,
“bucket”: “”, // 存储名，v4 和 v5 版本不一样
“appId”: “”,
“area”: “”, // 存储区域，例如 ap-beijing-1
“path”: “”, // 自定义存储路径，比如 img/
“customUrl”: “”, // 自定义域名，注意要加 http://或者 https://
“version”: “v5” | “v4” // COS 版本，v4 或者 v5
}
},
“picgoPlugins”: {} // 为插件预留
}
对照上面App设置里面，把对应参数保存就可以了。
③腾讯云的费用
打开费用地址，看下腾讯云大概的费用：
30G的存储量15.24元，下面都选择10够用的，如果下面用不了这么多可以再精简。价格还是蛮划算的，不需要个人域名，每个月多码一篇文章差不多可以回本了，带来的好处就是可以摆脱一张一张传图了。
4.aliyun（阿里云）配置
①阿里云的PigGo（App）配置
先看下阿里云需要哪里参数：
支付宝扫码注册，直接进入控制台，首先在阿里云OSS的控制台里找到你的accessKeyId和accessKeySecret：
进入控制台，
创建存储区域，创建Bucket：
可以看到这个zbfs就是存储空间名：
确认存储区域的代码：
验证成功。
上传测试：
可以看到图片已经上传上来了。
②阿里云的PigGo-Core配置
打开typora的配置文件：
复制下面代码到上面配置文件里：
{
“picBed”: {
“uploader”: “aliyun”,
“aliyun”: {
“accessKeyId”: “”,
“accessKeySecret”: “”,
“bucket”: “”, // 存储空间名
“area”: “”, // 存储区域代号
“path”: “”, // 自定义存储路径
“customUrl”: “”, // 自定义域名，注意要加 http://或者 https://
“options”: “” // 针对图片的一些后缀处理参数 PicGo 2.2.0+ PicGo-Core 1.4.0+
}
},
“picgoPlugins”: {}
}
对照填写参数：
验证完成，阿里云配置完成。
③阿里云费用
对象存储 OSS 详细价格信息，阿里云暂时没有OSS存储计算器，从价格信息表估算一下使用成本：
10G的流量，使用费用大概在12.72元/月，30G的流量费用在15.12元/月。这个只是作为图片拉取的费用来说的，如果外网流出量不足5G的话，大概还能节省2.5元/月，也算是不错了，一个月十块钱左右。
| 存储费用 | 单价 | 10G | 30G |
| 标准存储单价 | 0.12元/GB/月 | 1.2元/月 | 3.6元/月 |
| 内网流出流量 | 免费 | 0 | 0 |
| 内/外网流入流量 | 免费 | 0 | 0 |
| 外网流出流量 | 0.50元/GB | 5元/月 | 5元/月 |
| CDN回源流出流量 | 0.15元/GB | 1.5元/月 | 1.5元/月 |
| 复制到中国大陆区域 | 0.50元/GB | 5元/月 | 5元/月 |
| 请求费用 | 0.01元/万次 | 0.01元/月 | 0.01元/月 |
| 写入请求 | 0.01元/万次 | 0.01元/月 | 0.01元/月 |
| 数据取回 | 免费 |
内网流出流量（通过同地域ECS使用内网Endpoint，下载OSS的数据）
内/外网流入流量（数据上传到OSS）
5.github配置
先先注册个github
建个仓库，官方地址。在任何页面的右上角，使用 下拉菜单选择 New repository（新建仓库）
记下你取的仓库名。
生成一个token，也就是设置访问令牌，
全选就行了。
①github的PigGo（App）配置
把刚才的这些复制进去。
仓库名的格式是用户名/仓库，比如我创建了一个叫做zbfs的仓库，在PicGo里我要设定的仓库名就是用户名/仓库名。一般我们选择main分支即可。然后记得点击确定以生效，然后可以点击设为默认图床来确保上传的图床是GitHub。
验证生效了
②github的PigGo-Core配置
复制下面代码，到配置表，填写参数：
{
“picBed”: {
“uploader”: “github”,
“github”: {
“repo”: “”, // 仓库名，格式是username/reponame
“token”: “”, // github token
“path”: “”, // 自定义存储路径，比如img/
“customUrl”: “”, // 自定义域名，注意要加http://或者https://
“branch”: “” // 分支名，默认是main
}
},
“picgoPlugins”: {}
}
测试成功：
上传成功：
6.Imgur 的相关配置
Imgur因为需要设置代理比较麻烦，不具有通用性，换电脑了还需要设置，就不推荐了，图床的设置也是挺简单的，感兴趣的朋友自己操作下。
①Imgur 的PigGo（App）配置
②Imgur 的PigGo-Core代码
{
“picBed”: {
“uploader”: “Imgur”,
“Imgur”: {
“clientId”: “”, // imgur 的 clientId
“proxy”: “” // 代理地址，仅支持 http 代理
}
},
“picgoPlugins”: {}
}
六.发文流程
上面看到各个图床流量还是需要费用的，一定不要发布文章直接转换带图床链接的文章，这样发出去，会读取你图床里的图片，按流量收费，一篇火爆的文章，图床流量费用得几百元，别问怎么知道的。
图床作为只是用图床作为一个过渡，这样文章写好之后，复制文章到张大妈的编辑器进行内容图片拉取，拉取图片的这点流量还是不多的。
我们先找一篇已经书写好了的文章，演示下发文流程:
以这篇写好的Markdown文章为例，可以看到里面的图片还都是图床地址，且没有添加水印：
直接ctrl+a全选，复制
到张大妈富文本编辑框内粘贴，可以看到值得买的编辑框在拉取图片了：
拉取完成，可以看到图片已经被上传了，且被打上了值得吗logo。现在看文字是没有任何格式的。
在Typora新建一个文档，把张大妈富文本里的图片复制粘贴回来，图片已经变成了张大妈服务器上的图片，我们这时候再重新排版，里面的空白行不用管的，在渲染的时候会自动忽略空白行，如果有强迫症可以顺手删掉。
划重点：
下面中扩号内黄色高亮的地方是，发文后图片下面的备注名字，里面的img要全部删掉，或者替换成自己想添加的图片备注。一般情况下是删掉的。
直接用ctrl+H替换掉就可以了，在Typora按下ctrl+H，调出替换对话框，输入输入![img]，替换为![]。
这样所有图片的备注就完全被替换掉了，如果想单独给图片添加备注，直接在中括号内输入备注信息就可以了。
完成排版之后，可以再大纲里面看到文章的目录，这个目录渲染后会被值得买识别，变成文章目录。前面讲过了，值得买平台识别的目录从二级目录开始，我们设置的目录也要从二级目录开始。
切换到代码模式，复制代码：
再到张大妈富文本编辑器内粘贴：
右击选择Markdown转换：
转换完成。
然后把商品插入成卡片就可以了
七.文章同步
正常情况下，文章保存在这里的。
也可以自定义文件夹。
要是想实现同步功能，只要把两个文件夹同步就行了，上面我们说到过，一个是主题文件夹，一个是文章存储文件，这样就可以再不同设备实现码字的无缝衔接了。
下面是调教过的CSS渲染代买，可以根据上篇自行设置格式，直接用也可以。
.markdown-here-wrapper { /*Markdown Here 的全局配置，没有默认值*/
/*字号em默认是相对16px的大小，也可直接用px作单位*/
line-height:28px; /*行间距，可用百分比，数值倍数，像素设置，还包括text-indent缩进、letter-spacing字间距*/
word-spacing: 1px; /*字间距*/
letter-spacing: 1px; /*字母间距*/
margin: 0 3px 14px 3px;
}
pre, code {/*pre和code用于代码显示，code通常以元素框即代码块显示，pre则只保留代码中的空格与换行符*/
/*代码字体*/
font-family: Avenir, 'PingFangSC-Light';
margin: auto 5px;
}
code { /*标签通常只是把文本变成 等宽字体*/
white-space:nowrap; /*如何处理元素内空白行，回车or忽略,nowrap不换行，pre-wrap换行*/
border: 1px solid #EAEAEA; /*边框，用于设置边框属性，1px为边线尺寸，solid意为实线，#EAEAEA为边框颜色*/
border-radius: 2px; /*给 div 元素添加圆角的边框*/
display: inline;/*inline 表示按照内联模式显示，它会和周围的元素在一行。如果是 display:block, 它会和周围的元素不在一行，自己单独一行。*/
}
pre { /*严格限制为等宽字体格式*/
line-height: 1.4em; /*行高*/
display: block !important;
}
pre code {
white-space: pre;
overflow: auto;
border-radius: 3px;
padding: 1px 1px;
display: block !important;
}
strong, b{ /*strong 加粗，用粗体显示，也可以自定义自己的强调方式 */
color:#BF360C !important;
font-size:15px !important;
}
em, i { /*斜体*/
color: #BF360C !important;
}
hr { /*分割线*/
border: 0px dotted#BF360C; /*双跟分割线 粗细，solid颜色 #a5a5a5 */
border-top:1px dotted#BF360C !important;/*上分割线 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */
border-bottom:0px dotted#BF360C !important ; /* 下分割线，粗细solid类型-不写是空心，颜色 */
margin:10px 0 10px 0 !important; /*外边距*/
}
a:link { /* 未被访问的链接 */
color:#009688 !important; /*颜色*/
font-style:normal !important; /*字重*/
}
a:visited {/* 已被访问的链接 */
color:#009688 !important; /*颜色*/
font-style:normal !important; /*字重*/
}
a:hover {/* 鼠标指针移动到链接上 */
color:#009688 !important; /*颜色*/
font-style:normal !important; /*字重*/
}
/*段落设置，内边距用padding*/
p {
font-family: Avenir, 'PingFangSC-Light' !important;
padding: 0 0 !important;
text-align: justify !important;
font-size: 15px !important;
text-indent:0; /*首行缩进*/
}
table, pre, dl, blockquote, q, ul, ol { /*表格、预格式化、定义列表、块引用、短引用、无序列表、有序列表统一设置*/
margin: 10px 5px;
}
ul, ol { /*无序、有序列表通用设置*/
padding-left: 15px;
font-family: Avenir, 'PingFangSC-Light' !important;
text-align: justify !important;
font-size: 14px !important;
}
li { /*列表中项目的设置*/
margin: 10px;
}
li p { /*列表中项目的段落的设置*/
margin: 10px 0 !important;
}
ul ul, ul ol, ol ul, ol ol {/*有序列表、无序列表的统一设置*/
margin: 0;
padding-left: 10px;
}
ul { /*无序列表的前缀，circle,square,好多种,同样有序列表ol也可以设置不同的标记*/
list-style-type: circle;
}
dl { /*自定义列表的设置*/
padding: 0;
}
dl dt { /*自定义列表项的设置*/
font-weight: bold; /*字重*/
font-style: italic; /*字形*/
}
dl dd {
margin: 0 0 10px;
padding: 0 10px;
}
blockquote, q { /*引用块设置*/
border-left: 2px solid #BF360C;
padding: 0 10px;
color: #777;
quotes: none;
margin-left: 1em;
}
blockquote::before, blockquote::after, q::before, q::after {
content: none;
}
/*各级标题统一设置*/
h1, h2, h3, h4, h5, h6 {
margin: 7px 0 7px 0; /*段前后、左右缩进值*/
padding:5px 0 5px 0;/*内边距,控制和黑线的距离第一个数控制和上划线的距离.上右下左,留白距离、缩进值*/
font-style: bold !important;
color: #BF360C !important;
}
h1 {
font-size:16px !important;
color:#BF360C !important;/*颜色*/
text-align:center !important; /*标题位置,center,right,left*/
font-weight:bolder !important; /*字重bold加粗 、 normal正常、bolder更粗*/
letter-spacing: 3px !important;
border:2px solid #BF360C !important; /* 边框样式 */
}
h2 {
font-size:16px !important;
margin-top:3px 0 !important;
padding: 3px 15px !important;
text-align:center !important; /*标题位置,center,right,left*/
background-color: #BF360C !important;
color: white !important; /*颜色*/
font-weight:bolder !important; /*字重bold加粗 、normal正常、bolder更粗*/
letter-spacing: 3px !important;
font-variant: normal !important;/*normal 、small-caps*/
border-top:0 solid#BF360C !important;/* 粗细，颜色#ddd跟随主设定，solid类型-不写是跟随标题主色，替换了显示新颜色 */
border-bottom:0 solid#BF360C !important ; /* 粗细solid类型-不写是空心，颜色 */
}
h3 {
font-size:15px !important;
color:#BF360C !important;
padding: 5px 0 !important;
text-align:left !important; /*标题位置,center,right,left*/
width:auto !important;
padding:0 auto !important;
}
h4 {
font-size: 14px !important;
text-align:left !important; /*标题位置,center,right,left,justify*/
color:#BF360C !important;
padding: 0 0 0 7px !important;
border:1px dotted #BF360C !important;
font-weight:normal !important; /*字重*/
}
h5 {
font-size: 14px !important;
text-align:left !important; /*标题位置,center,right,left,justify*/
color:#BF360C !important;
padding: 0 0 0 7px !important;
border:1px solid #BF360C !important;
font-weight:normal !important; /*字重*/
}
h6 {
color:white !important; /*颜色*/
font-style:normal !important; /*字重*/
padding: 0 0 0 7px !important;
background-color: #BF360C !important;
font-weight:normal !important; /*字重*/
}
table { /*表格元素的设置*/
padding: 0;
border-collapse: collapse;
border-spacing: 0;
font-size: 1em;
font: inherit;
border: 0;
margin: 0 auto;
}
tbody { /*表格主题的设置*/
margin: 0;
padding: 0;
border: 0;
}
table tr {
border: 0;
border-top: 1px solid #CCC;
background-color: white;
margin: 0;
padding: 0;
}
table tr:nth-child(2n) {
background-color: #F8F8F8; /*背景色*/
}
table tr th, table tr td { /*tr为行标签、th为表头单元格标签、td为普通单元格标签*/
border: 1px solid #CCC;
margin: 0;
padding: 5px 10px;
}
table tr th {
font-weight: bold;
color: #eee;
border: 1px solid #BF360C; /*表头边框色*/
background-color: #BF360C; /*表头背景色*/
}
总结
好了，到此，这就是本文的全部内容了！整整测试了两天时间，
如果您觉得文章写的还不错的话，点赞、收藏、评论一条龙！
感谢大家的观看，我们下次再见！
往期热文推荐