VSCode搭建markdown编辑环境

801 阅读2分钟

说明

由于Typora变成收费的了,可博客不能停啊,于是,我只好使用啥都能开的VsCode来写md了。虽然可能没有原来的Typora方便,但插件多的优势也足以弥补了,让我们开造吧!

准备安装VsCode相关插件

markdown all in one

搭建VSCODE的Markdown编辑环境-2022-01-27-11-55-21

picgo

常用的图床工具,Typora就是使用了它,我配合snipaste来粘贴图片真的会很爽啊! snipaste下载官网 搭建VSCode的markdown编辑环境-2022-01-27-13-34-03

Markdown PDF

可将md文件导出为pdf。 搭建VSCode的markdown编辑环境-2022-01-27-13-34-34

安装Picgo-core

也就是一个命令行工具了,VSCODE要使用PicGo还是得找到电脑里的命令行工具来执行的! 相关的win和mac的配置,请参考官方文档

npm i picgo -g #下载
picgo use uploader #设置图床配置

使用阿里云的OSS对象存储

此部分图片部分来源于掘金

注册账号

此环节省略,注册好登录后进入控制台。

开通OSS的对象储存服务

搭建VSCode的markdown编辑环境-2022-01-27-14-46-54

创建你的Bucket

搭建VSCode的markdown编辑环境-2022-01-27-14-48-28 读写权限一定要改为公共读 搭建VSCode的markdown编辑环境-2022-01-27-14-50-01

使用Access Key

就是访问aliyun API的密钥。 搭建VSCode的markdown编辑环境-2022-01-27-14-49-21

使用自己的域名

由于我的域名还在备案中,先暂且不做演示说明。待补充中...

进一步配置

使用授权管理可以配置读写权限跨域等 使用图片处理可以改变图片的大小,缩放以及设置水印等。 搭建VSCode的markdown编辑环境-2022-01-27-16-47-14 搭建VSCode的markdown编辑环境-2022-01-27-16-49-33

创建不同的文件夹

我们最好是在Bucket内部再创建若干的

PicGo插件配置

使用config.json配置文件

找到小齿轮,打开配置项。 搭建VSCode的markdown编辑环境-2022-01-27-13-52-00 搭建VSCode的markdown编辑环境-2022-01-27-13-52-53 输入框中输入picgo。 搭建VSCode的markdown编辑环境-2022-01-27-13-54-03 当使用上方的picgo use uploader来设置图床,会自行创建这个配置文件的,把配置文件的路径引入就ok了。 当然了,如果你不设置这个配置文件又想使用阿里云的图床,你就需要按规则填写picgo插件里其它的配置选项了!

上传图片的图片名格式配置

可以参考配置说明,里面有详细的解释。我是使用编辑的文件名+上传时间 搭建VSCode的markdown编辑环境-2022-01-27-14-24-27

上手使用

我使用snipaste截图后保存到剪贴板就可以使用ctrl+alt+U(windows)或者command+opt+U(macOS)直接上传,本文的插图都是这样编辑的。

总结

VsCode还真是啥都能干,只要肯钻研,就有不花钱的方法,还可以提升下技术能力。当然了,要是不像这么复杂买下Typora激活也是可以的。