一、写在前面
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":"",//githubtoken"path":"",//自定义存储路径，比如img/"customUrl":"",//自定义域名，把稳要加http://或者https://"branch":""//分支名，默认是master}
5.aliyun（阿里云）配置
{"picBed":{"uploader":"aliyun","aliyun":{"accessKeyId":"","accessKeySecret":"","bucket":"",//存储空间名"area":"",//存储区域代号"path":"",//自定义存储路径"customUrl":"",//自定义域名，把稳要加http://或者https://"options":""//针对图片的一些后缀处理参数PicGo2.2.0+PicGo-Core1.4.0+}},"picgoPlugins":{}}
6.Imgur 的干系配置
{"picBed":{"uploader":"Imgur","Imgur":{"clientId":"",//imgur的clientId"proxy":""//代理地址，仅支持http代理}},"picgoPlugins":{}}
配置详细指南
六.文章渲染
在用markdown 书写的过程中，张大妈可以识别二级标题，直接从二级标题开始写作。
第二，如果这样写完之后，用markdown here渲染后，图片链接是用的图床链接，这样的话，会利用图床的流量，造成用度，以是我们只是用图床作为一个过渡，这样文章写好之后，复制文章到张大妈的编辑器进行内容拉取，这时候图片就变成了张大妈的链接，然后再复制回来进行终稿的排版。这一步相称于把图片从图床存储到张大妈的做事器。然后排版后，再复制代码到张大妈的富文本编辑器进行css渲染。
七.文章同步
正常情形下，文章保存在这里的。
也可以自定义文件夹。
假如想实现同步功能，只要把两个文件夹同步就行了，上面我们说到过，一个是主题文件夹，一个是文章存储文件，这样就可以再不同设备实现码字的无缝衔接了。
好了，到此，这便是本文的全部内容了！
如果您以为文章写的还不错的话，点赞、收藏、评论一条龙！
感谢大家的不雅观看，我们下次再见！
。
