『PC搞机的快乐』 篇三十四: 我愿称之为最强码字神器 ——Typora让写作如牛奶般丝滑~图床与CSS渲染篇~
一、写在前面
Markdown 语言写的文字,借助markdown here在不同平台都可以统一显示。前面写过一篇关于Markdown语言的编写及发布前的CSS渲染。
正常来说一篇文章发布出来需要经过以下流程:
「码字→配图→成文→样式化→发布」
「配图→码字→成文→样式化→发布」
各个自媒体平台的编辑器至今仍然是富文本编辑器,并且都不怎么好用, 用富文本编辑器插入图片就显得有点麻烦了,在富文本模式下,插入图片,然后再获取连接,再用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 Anything | 2.虫部落快搜 | 3.设计导航 | 4.优设导航 |
5.鸠摩搜书 | 6.云盘精灵 | 7.史莱姆搜索 | 8.行业分析搜索 |
9.茶杯狐 | 10.天天云搜 | 11.小不点搜索 | 12.资源狗导航 |
13.1纳米学习 | 14.龙轩导航 | 15. 书享家 | 16.noexcuselist |
17.北邮人导航 | 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。
五、图床配置
图床就是一个第三方存储图片的地方,借助 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渲染。
七.文章同步
正常情况下,文章保存在这里的。
也可以自定义文件夹。
要是想实现同步功能,只要把两个文件夹同步就行了,上面我们说到过,一个是主题文件夹,一个是文章存储文件,这样就可以再不同设备实现码字的无缝衔接了。
好了,到此,这就是本文的全部内容了!如果您觉得文章写的还不错的话,点赞、收藏、评论一条龙! 感谢大家的观看,我们下次再见!
往期热文推荐:
胖子曾是被捧杀的瘦子
懂代码的,vscode(或者其他现代的编辑器或ide>不是更好用。。
校验提示文案
阅读时光
校验提示文案
阿旭521
校验提示文案
饮涧癫猿
校验提示文案
值友1973316860
校验提示文案
囊括四海
校验提示文案
海立点值
校验提示文案
远风
校验提示文案
梅加雨
校验提示文案
Veagau
校验提示文案
Veagau
校验提示文案
软硬结合
校验提示文案
幕后者
校验提示文案
一个努力的程序员
校验提示文案
大又贼大
校验提示文案
值友9496814149
组内协作则加上有道云文档一起用,分享链接后,有改动同事刷新下即可
校验提示文案
leon787
校验提示文案
睡觉的狮子
校验提示文案
wlbol
校验提示文案
绝恋之夏
校验提示文案
值友7294013541
校验提示文案
胶子缠身的皮卡丘
校验提示文案
甘草锌
校验提示文案
囊括四海
校验提示文案
tmfc
校验提示文案
直男的馈赠
校验提示文案
哆啦西梦
校验提示文案
长腿叔叔xp
校验提示文案
FreeJay
校验提示文案
g0oker
校验提示文案
海立点值
校验提示文案
绝恋之夏
校验提示文案
wlbol
校验提示文案
睡觉的狮子
校验提示文案
值友1973316860
校验提示文案
leon787
校验提示文案
值友9496814149
组内协作则加上有道云文档一起用,分享链接后,有改动同事刷新下即可
校验提示文案
大又贼大
校验提示文案
一个努力的程序员
校验提示文案
幕后者
校验提示文案