一、写在前面
Markdown 语言写的文字，借助markdown here在不同平台都可以统一显示。前面写过一篇关于Markdown语言的编写及发布前的CSS渲染。
关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高https://post.smzdm.com/p/aqn9pk7k/
正常来说一篇文章发布出来需要经过以下流程：
「码字→配图→成文→样式化→发布」
「配图→码字→成文→样式化→发布」
各个自媒体平台的编辑器至今仍然是富文本编辑器，并且都不怎么好用， 用富文本编辑器插入图片就显得有点麻烦了，在富文本模式下，插入图片，然后再获取连接，再用markdown语言编写就很麻烦了，一直在尝试有没有一种方法，只要拖拽上传，或者复制到Typora里就可以直接完成图片的上传和markdown语言的转译。
每个人写作的流程可能不太一样，针对不同的文章的写作方法也可能不一样。
首先构建文章的大纲，如一篇产品的评测，这样的文章在拍照的时候已经大概有了写作的思路，后期文章呈现的时候，先按照拍摄的思路上传图片然后再配以文字。
清单类的文章，可能先需要确定清单，然后每个清单需要写哪些内容，就采用边写边配图的方式。这种时候，一边配图一边码字，就容易造成一种强烈的割裂感，插完图片可能思路就被打断了。
今天重点解决Typora 平台下富文本和markdown语言的共同编辑、利用Typora最近更新的图床上传功能，以实现如牛奶般丝滑的写作体验。
二、Typora简介
Typora 是一款支持实时预览的 Markdown 文本编辑器，简单来说就是富文本编辑和markdown语言都可以。有 OS X、Windows、Linux 三个平台的版本，是完全免费的A truly minimal markdown editor。
Typora将预览框和编辑框整合在一起了，也就是说输入代码语言之后，会自动识别为预览模式，可以看到实际渲染的效果。 从个人使用的角度上来说，Typora的这种实时预览的模式符合我的使用习惯。左边编辑右边预览的模式，对我来说还是有笔记强烈的割裂感的。在左边完成输入之后，还要移动眼睛到右边查看效果。
解决痛点：
首先，选用这款编辑器最大的原因是人性化，用着比较爽，一般 Markdown 编辑器界面都是两个窗口，左边是 Markdown 源码，右边是效果预览。有时一边写源码，一边看效果，确实有点不便。 Typora 可以实时的看到渲染效果，而且是在同一个界面，所见即所得。也就是说一次编辑可以同时得到markdown语言的文本和富文本模式的文本。
第二，虽然是markdown写作，但是富文本编辑的快捷键功能，操作之后，会自动编辑为markdown语言。比如CTRL+B加粗，ctrl+I斜体，ctrl+U，还有ctrl+数字可以快速设置标题。
第三。ctrl+1就是一级标题，ctrl+2就是二级标题，因为张大妈可以识别二级标题，最高标题用二级，转换后可以直接被张大妈识别，然后生成文章大纲。 辑器实时预览模式下呢还兼顾了部分富文本编辑的功能，比如图片的拖拽插入，CTRL+B加粗，ctrl+I斜体，ctrl+U下划线，一定程度上提高了码字效率。
第四，设置快捷方式也是很方便的，只要复制网址之后，在Typora内选中文字，然后ctrl+K，就会自动识别粘贴板内的链接，并自动生成快捷方式。
第五，富文本编辑框下，是一般是无法添加表格的，利用markdown语言可以实现表格的效果，尤其是写作清单类的文章，需要添加链接，加入表格可以使文章可读性更高。
网络清单1.Anywhere Anything2.虫部落快搜3.设计导航 4.优设导航5.鸠摩搜书6.云盘精灵 7.史莱姆搜索8.行业分析搜索9.茶杯狐10.天天云搜11.小不点搜索12.资源狗导航13.1纳米学习14.龙轩导航15. 书享家16.noexcuselist17.北邮人导航18.alternativeto
第六.大纲视图：此功能也是很方便的一个功能，可以随着写作随时查看文章结构，调整写作思路，不过遗憾的是不能像word一样拖动大纲调整文字。
三、安装主题
主题文件夹可以在文件——偏好设置内——外观内设置打开。
[主题地址]（http://theme.typora.io）下载主题之后，解压然后复制到主题文件夹即可。
也可以将我们上文中的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。
四、Pandoc导出文件
平常写完之后是可以导出pdf和html格式，但是要导出某docx，odt，rtf，epub，LaTeX和Wiki就需要安装Pandoc支持。安装Pandoc之后，您可以通过从菜单栏中单击“文件”->“导入”来导入支持的文件类型，或者直接将文件拖放到Typora中。Pandoc的下载页面
导入支持文件：.docx，.latex，.tex，.ltx，.rst，.rest，.org，.wiki，.dokuwiki，.textile，.opml，.epub。
导出支持以下文件格式：HTML，PDF（这两个不需要Typora），Docx，odt，rtf，Epub，LaTeX，Media Wiki。
安装和使用Pandoc参考方法
五、图床配置
图床就是一个第三方存储图片的地方，借助 typora图床功能，我们可以实现将图片拖拽或者粘贴到文章中，可以直接返回图片的URL，并且自动生成markdown格式文本，这样就大大简化了图片的上传和设置。常用的图床有七牛云、SM.MS、腾讯云等，七牛云和SM.MS，这两个图床是可以直接被张大妈的富文本编辑器拉取的。七牛云相对来说还是需要门槛的，这就是必须要有一个域名，现在申请一个域名也是比较简单的，下面主要以七牛云和SM.MS为例说一下图床的使用：
typora配置前准备：
1.确保 typora 的版本在 0.9.86 以上，这个版本开始增加了图片同步返回功能。
各图床配置代码使用的名称：
smms -> SM.MS
tcyun -> 腾讯云COS
upyun -> 又拍云
aliyun -> 阿里云OSS
qiniu -> 七牛云
imgur -> Imgur
weibo -> 微博图床
github -> GitHub
1.七牛图床配置
七牛云的认证用户十每个月10G免费存储空间，下载流量10G，由于只是码文的过程中过渡一下，足够用了。
关于存储空间方面10G也是够用的，七牛云的照片经过七牛云的瘦身只有几百B，瘦身的费用也是比较划算的一千次一毛钱，随便往里面存入几块钱就够用了。
准备工作，注册七牛云账号，并实名认证，这个实名验证非常快，大概是机器识别做的验证。访问下面的链接：
点击首页的对象管理，新建空间：
在存储空间里可以看到这些信息，留到下面配置使用：
然后再个人中心里可以找到AK和SK。
然后再Typora里打开偏好设置——图像——选择PICGO-core，打开配置文件。
把下面这段代码复制到配置文件内，我们对照参数开始配置：
{
"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在插入时自动上传图像（包括从菜单，触摸栏，通过复制和粘贴或拖放插入图像），要启用此功能，请在“插入时…”下选择“上传图像”。
整个流程下来七牛云的配置就算完成了。
2.sm.ms图床配置
每个文件最大5 MB。每个请求最多10个文件。sm.ms图床,SM.MS图床的空间相对还是比较小的，好处是不需要个人域名，这样用起来算是门槛比较低了。每天限制200张上传量。对于码文来说勉强够用，如果存储量快满了，就要及时清理。
配置来说就比较简单了，只要修改一个API密钥就可以了：密钥后台
还是参照上面七牛图床的配置方法，在配置文件里面将"token"替换掉就可以了。
{
"picBed": {
"uploader": "smms", // 代表当前的默认上传图床为 SM.MS,
"smms": {
"token": "这里面的token换成你上个页面的申请的token" //一定要换
}
},
"picgoPlugins": {} // 为插件预留
}
插入图片之后看到自动返回了了网页地址，并转译成了markdown语言。
今天就以这两个为例子，后面几个的配置代码如下，根据提示修改一下就可以使用了。
3.腾讯云配置
{
"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": {} // 为插件预留
}
4.github配置
{
"repo": "", // 仓库名，格式是 username/reponame
"token": "", // github token
"path": "", // 自定义存储路径，比如 img/
"customUrl": "", // 自定义域名，注意要加 http://或者 https://
"branch": "" // 分支名，默认是 master
}
5.aliyun（阿里云）配置
{
"picBed": {
"uploader": "aliyun",
"aliyun": {
"accessKeyId": "",
"accessKeySecret": "",
"bucket": "", // 存储空间名
"area": "", // 存储区域代号
"path": "", // 自定义存储路径
"customUrl": "", // 自定义域名，注意要加 http://或者 https://
"options": "" // 针对图片的一些后缀处理参数 PicGo 2.2.0+ PicGo-Core 1.4.0+
}
},
"picgoPlugins": {}
}
6.Imgur 的相关配置
{
"picBed": {
"uploader": "Imgur",
"Imgur": {
"clientId": "", // imgur 的 clientId
"proxy": "" // 代理地址，仅支持 http 代理
}
},
"picgoPlugins": {}
}
配置具体指南
六.文章渲染
在用markdown 书写的过程中，张大妈可以识别二级标题，直接从二级标题开始写作。
第二，如果这样写完之后，用markdown here渲染后，图片链接是用的图床链接，这样的话，会使用图床的流量，造成费用，所以我们只是用图床作为一个过渡，这样文章写好之后，复制文章到张大妈的编辑器进行内容拉取，这时候图片就变成了张大妈的链接，然后再复制回来进行终稿的排版。这一步相当于把图片从图床存储到张大妈的服务器。然后排版后，再复制代码到张大妈的富文本编辑器进行css渲染。
七.文章同步
正常情况下，文章保存在这里的。
也可以自定义文件夹。
要是想实现同步功能，只要把两个文件夹同步就行了，上面我们说到过，一个是主题文件夹，一个是文章存储文件，这样就可以再不同设备实现码字的无缝衔接了。
好了，到此，这就是本文的全部内容了！如果您觉得文章写的还不错的话，点赞、收藏、评论一条龙！ 感谢大家的观看，我们下次再见！。