我愿称之为最强码字神器 ——Typora让写作如牛奶般丝滑~图床与CSS渲染篇~

一、写在前面

Markdown 语言写的文字，借助markdown here在不同平台都可以统一显示。前面写过一篇关于Markdown语言的编写及发布前的CSS渲染。

关于Markdown here CSS渲染的经验分享——让你的文章排版更优美，可读性更高写在前面说实话用了很久的evernote，最近又转战印象笔记，但是对于Markdown一直没有去用，因为平时word富文本编辑器用的习惯了，在everynote整理笔记也是在word里面修改好了然后再倒入到笔记里面，所以对Markdown编辑方式使用也不多。最近一段时间呢，发现值得买的很多大神文章排纵笔浮生| 赞36 评论20 收藏416查看详情

正常来说一篇文章发布出来需要经过以下流程：

「码字→配图→成文→样式化→发布」

「配图→码字→成文→样式化→发布」

各个自媒体平台的编辑器至今仍然是富文本编辑器，并且都不怎么好用， 用富文本编辑器插入图片就显得有点麻烦了，在富文本模式下，插入图片，然后再获取连接，再用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语言可以实现表格的效果，尤其是写作清单类的文章，需要添加链接，加入表格可以使文章可读性更高。

第六.大纲视图：此功能也是很方便的一个功能，可以随着写作随时查看文章结构，调整写作思路，不过遗憾的是不能像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", // 代表当前的默认上传图床为 SM.MS, "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渲染。

七.文章同步

正常情况下，文章保存在这里的。

也可以自定义文件夹。

要是想实现同步功能，只要把两个文件夹同步就行了，上面我们说到过，一个是主题文件夹，一个是文章存储文件，这样就可以再不同设备实现码字的无缝衔接了。

好了，到此，这就是本文的全部内容了！如果您觉得文章写的还不错的话，点赞、收藏、评论一条龙！ 感谢大家的观看，我们下次再见！

往期热文推荐：

多收藏一个，就少求一次人——哪些日常必备神级网站，真正值得收藏~~前言本来作为一个效率控，自从加入张大妈之后变成了一位职业收藏家，无论是知乎、张大妈、B站，还是浏览器都收藏了满满的内容，但是每次想用的时候找到这些收藏就需要爬楼，这就是松鼠症（强迫性囤积症）导致的收藏夹爆仓，久而久之，每次使用都懒得翻收藏夹了，这次从100多个收藏网站中精选出来这些，基本上能够满足日纵笔浮生| 赞308 评论58 收藏4k查看详情

『干货集结号』 篇十五：资源那里去找？十八个超好用的搜索聚合网站，必须低调收藏使用~~前言君子生非异也，善假于物也。面对海量的互联网信息，会搜索才叫会上网，搜索技能在我们冲浪过程中也是举足轻重。是不是收藏了很多的网站，每次从收藏夹里找到这些网站也够浪费利器的。今天整理了一下收藏夹，把这些好好用的网站都搜集好了，这样好用的利器，有了这几个网站之后，赶快get起来吧！有了这些网站，让你快纵笔浮生| 赞30 评论3 收藏434查看详情