让写作如牛奶般丝滑——最强的Markdown编辑器Typora

一、写在前面

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渲染。

七.文章同步

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

也可以自定义文件夹。

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


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


推荐阅读更多精彩内容