登录 注册

php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

聊聊VSCode中怎么搭建MarkDown写作环境

Typora收费了？下面本篇文章给大家介绍一下VSCode中搭建MarkDown写作环境的方法， 开源软件，完全值得信赖！强烈推荐！

聊聊VSCode中怎么搭建MarkDown写作环境

我平时用的最习惯的MarkDown写作工作是Typora，所见即所得的用户体验，再加上丰富的主题，让人忍不住直呼“真香”。

但是大家都知道，Typora1.0之后，它就开始收费了，最近我的Mac电脑上装的Typora，已经开始提示我升级。而且，整理我的《面渣逆袭手册》的时候，因为文件太大，Typora非常卡顿，所以，思来想去，我决定用VS Code搭建一套MarkDwon写作环境。

一、VS Code安装

VS Code的安装就不用多说了，从官网下载对应版本的安装包，安装即可。【推荐学习：《vscode入门教程》】

官网下载地址：code.visualstudio.com/Download

1.png

这是我的Windows电脑上安装的VS Code，注意看，我的顶栏、侧边栏都是中文的，因为安装了中文的插件：

2.png

二、MarkDown插件增强

我们来看一下直接用VS Code打开MarkDown文件的效果：

3.png

右上角可以打开双栏预览：

4.png

看起来，还可以，但还有改进的空间，我们可以安装一些插件来让它变得更好。

1. Markdown All in One

Markdown All in One是一款多合一的MardDown增强插件：

5.png

它号称支持Markdown所需要的一切功能，包括键盘快捷键、目录、自动预览等等，可以看一下它的扩展页，或者仓库说明文档：

  • https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
  • https://github.com/yzhang-gh/vscode-markdown/blob/master/README.md

5-2.png

2.Markdown Image

Markdown Image主要是对MarkDown中插入图片的扩展，支持将图片放在本地或第三方的图床或对象存储。

使用这个插件，可以做到类似Typora的直接复制本地图片，然后粘贴进MarkDown，图片文件默认是放在本地，也可配置支持 Imgur，七牛，SM.MS，Coding 等图床。

6.png

安装完这个插件之后，可以做一些配置，进配置页，搜索：markdown-image，可以配置一下相对路径，默认图片文件保存在/res路径下。

7.png

使用快捷键Shift+Alt+V就可以直接将剪贴板里面复制好的图片粘贴进文档里：

8.png

3.Markdown Preview Enhanced

Markdown Preview Enhanced是对VS Code预览功能的增强，可以改善VS Code的预览体验。

9.png

安装这个插件以后，点击预览按钮，就会使用增强的预览：

10.png

还可以在边栏显示目录，不过显示了目录，整个界面就显得有些逼仄。

11.png

它同样也提供多个预览主题：

12.png

4.Word Count CJK

Word Count CJK是一个用来统计中文字数的插件：

13.png

对于我这种爱肝长文的人来讲，看到文章的字数，也是满满的成就感了。

14.png

5.MarkDown Editor

如果说我们就是要Typora所见即所得的体验呢？

我也找到了一款插件MarkDown Editor：

15.png

安装完成之后，对MD文件选择Open with MarkDown Editor就可以所见即所得地打开MD文件了。

MarkDown Editor使用

还有一些其它的插件：

  • markdownlint：markdow格式检查
  • Markdown Preview Github Styling：GitHub主题预览

大家也可以去体验一下。

三、图床搭建

使用MarkDown写作，还有一个重要的需求，就是图床，我们写的文章是要发布出去的，MD中的图片是以路径形式保存，本地的路径发布出去可没法访问，所以我们需要给MD编辑器接入图床的功能。

我之前用Typora+PicGo+Gitee搭建了一版图床，后来Gitee出了那档子事，又换成了Typora+PicGo+Github，我们也照这个思路，在VS Code上搭建一版图床。

1.GitHub仓库配置

2.1. 创建一个新的仓库

创建一个新的GitHub仓库：

  • 公开，必须的，防止访问不到
  • 添加一个READM文件，防止仓库没有主干分支

17.png

2.2. 生成token

  • 进入settings

18.png

  • 找到developer settings

19.png

  • 创建新的Personal access tokens，时间设置为永不过期，给repo权限就可以了

20.png

  • 生成的Token要记下来，只显示一次

21.png

2. 安装配置PicGo

2.1.安装PicGO插件

在VS Code里搜索PicGo，安装：

22.png

2.2.配置PicGO

  • 打开PicGo的扩展配置

23.png

  • 配置uploader，选择github

24.png

  • GitHub相关配置，以我的配置为例：

    • Branch：main，分支

    • Path：空，也可以配置一个相对路径

    • Custome Url：空，

      其实可以配置一个CDN加速的url，jsDeliver，它是一个免费的CDN，最近似乎不可用了，大家也可以试一下，它的使用方法：https://cdn.jsdelivr.net/gh/你的github用户名/你的仓库名@发布的版本号——cdn.jsdelivr.net/gh/fighter3…

    • Repo：fighter3/picgo-win，用户名/仓库格式

    • Token：填之前保存的就行了

25.png

3.图床使用

  • 打开MD文件，从别的地方粘贴一个图片，使用 Ctrl + Alt + U，可以看到文件成功上传，并且可以预览

26.png

图片上传相关的快捷键：

OS从粘贴版上传图片从浏览器上传图片从输入框上传图片
Windows/UnixCtrl + Alt + UCtrl + Alt + ECtrl + Alt + O
OsXCmd + Opt + UCmd + Opt + ECmd + Opt + O

用GitHub当图床整体上还是不太理想，上传和访问都不太稳定，我们也可以在PicGo插件里把图床换成七牛、或者腾讯云、阿里云，大体上过程类似，也比较简单。

更多关于VSCode的相关知识，请访问：vscode教程！

以上就是聊聊VSCode中怎么搭建MarkDown写作环境的详细内容，更多请关注其它相关文章！