VSCode让markdown编写前所未有的顺滑
涉及到的工具及服务
- VSCode
- Markdown Preview Enhanced
- Markdown PDF
- markdownlint
- PicGo
- 阿里云OSS(对象存储)
markdown的概念不再赘述，其好处这里再啰嗦一遍：
- 纯文本，所以兼容性极强，可以用所有文本编辑器打开。
- 让你专注于文字而不是排版。
- 格式转换方便，Markdown 的文本你可以轻松转换html、电子书等。
- Markdown 的标记语法有极好的可读性。
安装VSCode
VScode是一款非常轻量级的编辑器，可以通过安装甚至自己编写一些小的插件来满足各种不同的使用需求，除了编写代码，使用它写markdown文件，也是十分方便，甚至超越了专门的markdown编辑软件（比如typora，之前用它整理书稿的时候经常卡死）
vscode获取方法如下：
vscode 官方网站（无需翻墙）：https://code.visualstudio.com
vscode 下载链接：https://code.visualstudio.com/Download
安装markdown相关插件
在vscode-扩展搜索markdown相关插件，如下图所示：
常用的插件如下，大家可根据需要下载：
令人头疼的图片问题
前三个插件都很简单，安装后即可使用，下面重点介绍下PicGo，它很好地解决了markdown长期以来困扰我的一个问题——图片问题。
问题产生
因为markdown是种文本编辑规范，对图片的支持天然不足。根据markdown规范，图片通过下面格式处理，图片的url支持本地文件目录及网络地址。
Format: 
但实际使用时，我们会发现与常用的word等工具相比，这种操作简直太不友好了：
- 纯文本格式，不支持直接粘贴图片，即无法通过截屏后直接粘贴图片(个人感觉不方便的地方)
常见的处理方式有两种：
- 方式一：使用本地文件目录图片，缺点：文档分享时很麻烦，需要把图片目录一并发给他人。
- 方式二：使用网络图片，缺点：需要先把图片传到图床平台（即能够存储文章图片的地方并且可获取图片地址，如github），然后把图片地址贴回文档，人工进行此操作过于繁琐。
解决方法
vsCode常见的处理办法是基于方式二，PicGo插件极大地简化了上传图床并粘贴图片地址的操作，其便捷程度几乎达到了复制粘贴的效果，完美地满足了vsCode中markdown文件的贴图需要。
安装插件
vsCode-扩展中搜索并安装picgo插件，如下图所示：
官网地址 https://github.com/PicGo/vs-picgo
配置插件
该工具开箱即用，真正实现零配置，默认采用sm.sm图片服务。
不仅如此，还支持主流的对象存储服务，如阿里云的OSS、腾讯的COS、github、七牛云等。本文中，我们以阿里云OSS图片为例，做下介绍。
其中，Access Key ID、Access Key Secret、Area、Bucket为必填项。具体的获取页面，每家云服务厂商会有所不同，补充说明如下：
-
Access Key ID和Access Key Secret阿里云的可通过下面路径获取，参考下图。
20200208160138.png -
Area就是地域的英文代码如oss-cn-beijing，可通过访问域名快速找到。
20200208161119.png Bucket就是用存放picgo上传图片的bucket
使用插件
先通过截图或其他方式将图片加载至剪贴板中，将光标停在需要插入图片的地方，使用快捷键即可插入图片，如mac中的Cmd+Opt+U。
PicGo已经帮我们把图片传到阿里云的OSS中，并且自动将markdown图片地址帮我们写好了，so easy!
补充说明
设置图片大小
markdown文件是没法调整图片大小的，阿里云OSS的图片地址处理参数恰好可以解决此问题。如下面地址中的?x-oss-process=image/resize,p_40可实现缩小40。
https://lys-picgo.oss-cn-beijing.aliyuncs.com/20200208132110.png?x-oss-process=image/resize,p_40
更多的操作指令参考 https://help.aliyun.com/document_detail/44686.html
印象笔记
印象笔记已经很好的支持了markdown格式了，而且支持ctr+V将图片直接插入，如下图所示。
但印象笔记将图片地址封装成一个只有它自己能识别的字符串，不具备流通性。其他工具无法正常显示图片，这也是比较遗憾的地方。