--- theme: smartblue --- 大家好，我是老三，我平时用的最习惯的MarkDown写作工作是Typora，所见即所得的用户体验，再加上丰富的主题，让人忍不住直呼“真香”。但是大家都知道，Typora1.0之后，它就开始收费了，最近我的Mac电脑上装的Typora，已经开始提示我升级。而且，整理我的《面渣逆袭手册》的时候，因为文件太大，Typora非常卡顿，所以，思来想去，我决定用VS Code搭建一套MarkDwon写作环境。 # 一、VS Code安装 VS Code的安装就不用多说了，从官网下载对应版本的安装包，安装即可。官网下载地址：https://code.visualstudio.com/Download ![VS Code](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/03f82ee99fb545f39492302d2da896ec~tplv-k3u1fbpfcp-zoom-1.image) 这是我的Windows电脑上安装的VS Code，注意看，我的顶栏、侧边栏都是中文的，因为安装了中文的插件： ![中文插件](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/073466695b78476cb80b185779f5b883~tplv-k3u1fbpfcp-zoom-1.image) # 二、MarkDown插件增强我们来看一下直接用VS Code打开MarkDown文件的效果： ![直接打开MarkDown](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fd548c78e5b0407a8b3f6e01b397677d~tplv-k3u1fbpfcp-zoom-1.image) 右上角可以打开双栏预览： ![双栏预览](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3a85f7727a9d4e3496488edcb7060115~tplv-k3u1fbpfcp-zoom-1.image) 看起来，还可以，但还有改进的空间，我们可以安装一些插件来让它变得更好。 ## 1. Markdown All in One Markdown All in One是一款多合一的MardDown增强插件： ![Markdown All in One](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b25e9eb7193f4c88877ecb79032d0d84~tplv-k3u1fbpfcp-zoom-1.image) 它号称支持Markdown所需要的一切功能，包括键盘快捷键、目录、自动预览等等，可以看一下它的扩展页，或者仓库说明文档： - https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one - https://github.com/yzhang-gh/vscode-markdown/blob/master/README.md ![Features](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da68a64c4ba941f88064954728c8bf15~tplv-k3u1fbpfcp-zoom-1.image) ## 2.Markdown Image Markdown Image主要是对MarkDown中插入图片的扩展，支持将图片放在本地或第三方的图床或对象存储。使用这个插件，可以做到类似Typora的直接复制本地图片，然后粘贴进MarkDown，图片文件默认是放在本地，也可配置支持 `Imgur`，`七牛`，`SM.MS`，`Coding` 等图床。 ![Markdown Image](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e72c53bb6294c19a7cb78ce0edc4673~tplv-k3u1fbpfcp-zoom-1.image) 安装完这个插件之后，可以做一些配置，进配置页，搜索：`markdown-image`，可以配置一下相对路径，默认图片文件保存在`/res`路径下。 ![配置](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a420cd3d356b4da180e2cfa1dfb5209f~tplv-k3u1fbpfcp-zoom-1.image) 使用快捷键`Shift+Alt+V`就可以直接将剪贴板里面复制好的图片粘贴进文档里： ![粘贴进去的图片和相对路径](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0275cd3a2aa849078532056ee2b33d2a~tplv-k3u1fbpfcp-zoom-1.image) ## 3.Markdown Preview Enhanced Markdown Preview Enhanced是对VS Code预览功能的增强，可以改善VS Code的预览体验。 ![Markdown Preview Enhanced](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b626d87591b4f698486005930464c51~tplv-k3u1fbpfcp-zoom-1.image) 安装这个插件以后，点击预览按钮，就会使用增强的预览： ![预览增强](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ff89533791543549b48fb2e55d2fe63~tplv-k3u1fbpfcp-zoom-1.image) 还可以在边栏显示目录，不过显示了目录，整个界面就显得有些逼仄。 ![显示目录](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/863e2377ebe54ada9522763829fa5aa7~tplv-k3u1fbpfcp-zoom-1.image) 它同样也提供多个预览主题： ![多主题](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/21de51adefbc4791a77682a3b61d865a~tplv-k3u1fbpfcp-zoom-1.image) ## 4.Word Count CJK Word Count CJK是一个用来统计中文字数的插件： ![Word Count CJK](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b8be340aaf9e4c42aa821fa79fb49635~tplv-k3u1fbpfcp-zoom-1.image) 对于我这种爱肝长文的人来讲，看到文章的字数，也是满满的成就感了。 ![字数统计](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2bff535d76a7486d9754c281893c6524~tplv-k3u1fbpfcp-zoom-1.image) ## 5.MarkDown Editor 如果说我们就是要Typora所见即所得的体验呢？我也找到了一款插件MarkDown Editor： ![MarkDown Editor](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/64fbfffaa55a41eb88a4deccad1f1c77~tplv-k3u1fbpfcp-zoom-1.image) 安装完成之后，对MD文件选择`Open with MarkDown Editor`就可以所见即所得地打开MD文件了。 ![MarkDown Editor使用](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a9c2896d49394b259f31430f2a05e3f3~tplv-k3u1fbpfcp-zoom-1.image) 还有一些其它的插件： - 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文件，防止仓库没有主干分支 ![创建仓库](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da189761dee7490d88abee376ba8a4d4~tplv-k3u1fbpfcp-zoom-1.image) ### 2.2. 生成token - 进入settings ![进入settings](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/090d4914b0364fcc8549e27d94e2041a~tplv-k3u1fbpfcp-zoom-1.image) - 找到developer settings ![developer settings](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/262d28c999934f39a16601a3aad56ba0~tplv-k3u1fbpfcp-zoom-1.image) - 创建新的Personal access tokens，时间设置为永不过期，给repo权限就可以了 ![创建新的Personal access tokens](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/517429fe105b4494abe2fdd16c284e66~tplv-k3u1fbpfcp-zoom-1.image) - 生成的Token要记下来，只显示一次 ![生成的Token](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/edbb6f89ff434ae7b1fb6516c5458e83~tplv-k3u1fbpfcp-zoom-1.image) ## 2. 安装配置PicGo ### 2.1.安装PicGO插件在VS Code里搜索PicGo，安装： ![PicGo插件](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/24e1ef6ba9e64efaa4671f17cbde14ca~tplv-k3u1fbpfcp-zoom-1.image) ### 2.2.配置PicGO - 打开PicGo的扩展配置 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63ddbc87161a4ca29210331676ca8aff~tplv-k3u1fbpfcp-zoom-1.image) - 配置uploader，选择github ![选择github](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cd47bb6a7dc845908307266d097e4336~tplv-k3u1fbpfcp-zoom-1.image) - GitHub相关配置，以我的配置为例： - Branch：main，分支 - Path：空，也可以配置一个相对路径 - Custome Url：空，其实可以配置一个CDN加速的url，jsDeliver，它是一个免费的CDN，最近似乎不可用了，大家也可以试一下，它的使用方法：`https://cdn.jsdelivr.net/gh/你的github用户名/你的仓库名@发布的版本号`——https://cdn.jsdelivr.net/gh/fighter3/picgo-win/fighter3/picgo-win/pic - Repo：fighter3/picgo-win，用户名/仓库格式 - Token：填之前保存的就行了 ![GitHub相关配置](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a6979001f4f04ddaaa024da47e92d3b0~tplv-k3u1fbpfcp-zoom-1.image) ## 3.图床使用 - 打开MD文件，从别的地方粘贴一个图片，使用 `Ctrl + Alt + U`，可以看到文件成功上传，并且可以预览 ![图床使用](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0bd3a0d7d2c4e7ebcc3a90b310f0287~tplv-k3u1fbpfcp-zoom-1.image) 图片上传相关的快捷键： | OS | 从粘贴版上传图片 | 从浏览器上传图片 | 从输入框上传图片 | | ------------ | ---------------- | ---------------- | ---------------- | | Windows/Unix | `Ctrl + Alt + U` | `Ctrl + Alt + E` | `Ctrl + Alt + O` | | OsX | `Cmd + Opt + U` | `Cmd + Opt + E` | `Cmd + Opt + O` |

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

参考： [1]. [将 VS Code 打造成一个体验舒适的 Markdown 编辑器](https://blog.bugimg.com/works/vscode-to-markdown-editor.html#%E5%89%8D%E8%A8%80) [2]. [vscode 秒变全功能所见即所得 markdown 编辑器](https://zhuanlan.zhihu.com/p/363219203) [3].[在VS Code中使用 Picgo + jsDelivr + Github搭建高速稳定图床](https://blog.csdn.net/kan2016/article/details/107507809)

⭐面渣逆袭系列： - [面渣逆袭：Java基础五十三问](https://mp.weixin.qq.com/s/M-6RSRcRd3X93cR7VXpanw) - [面渣逆袭：Java集合连环三十问](https://mp.weixin.qq.com/s/SHkQ7LEOT0itt4bXMoDBPw) - [面渣逆袭：JVM经典五十问，这下面试稳了！](https://mp.weixin.qq.com/s/XYsEJyIo46jXhHE1sOR_0Q) - [面渣逆袭：Java并发六十问](https://mp.weixin.qq.com/s?__biz=MzkwODE5ODM0Ng==&mid=2247489245&idx=1&sn=bc52281ebc85372e19513d663beb2d2d&chksm=c0ccfe78f7bb776e2c6396fe26aca84d0cd96f407e6fe0bf6eb068aed638ba9491bce8fc5b4c&scene=178&cur_album_id=2041709347461709827#rd) - [面渣逆袭：Spring三十五问，四万字+五十图详解！](https://mp.weixin.qq.com/s?__biz=MzkwODE5ODM0Ng==&mid=2247491359&idx=1&sn=7a0c3f5fc04b2e45a3cfba638941f663&chksm=c0ccf7baf7bb7eaccba3e29d2a768710af8a16c87574c3a8f4b24c8dee814b296ff56e3bd6e3&scene=178&cur_album_id=2041709347461709827#rd) - [面渣逆袭：二十二图、八千字、二十问，彻底搞定MyBatis！](https://mp.weixin.qq.com/s?__biz=MzkwODE5ODM0Ng==&mid=2247490612&idx=1&sn=e37c69a7875ce54a28c9918ea6a24a73&chksm=c0ccf491f7bb7d87bcc6f49a04a3e3a175f382cfdba3305151861988caa86b0feff1e5578e54&scene=178&cur_album_id=2041709347461709827#rd) - [面渣逆袭：计算机网络六十二问，三万字图文详解！速收藏！](https://mp.weixin.qq.com/s?__biz=MzkwODE5ODM0Ng==&mid=2247489885&idx=1&sn=1a4cb15c40c07e18f180df6fda8f472f&chksm=c0ccf1f8f7bb78eef66f067d63e2abdf1092847eba6372b6e4c15185a6d6ce7d407278c83e6f&scene=178&cur_album_id=2041709347461709827#rd) - [面试字节，被操作系统问挂了](https://mp.weixin.qq.com/s/KMGyn-FLkvzsMH06LV4OfQ) - [面渣逆袭：RocketMQ二十三问](https://mp.weixin.qq.com/s/IvBt3tB_IWZgPjKv5WGS4A)