聊聊VSCode中怎么搭建MarkDown寫作環(huán)境

Typora收費(fèi)了？下面本篇文章給大家介紹一下VSCode中搭建MarkDown寫作環(huán)境的方法， 開(kāi)源軟件，完全值得信賴！強(qiáng)烈推薦！

我平時(shí)用的最習(xí)慣的MarkDown寫作工作是Typora，所見(jiàn)即所得的用戶體驗(yàn)，再加上豐富的主題，讓人忍不住直呼“真香”。

但是大家都知道，Typora1.0之后，它就開(kāi)始收費(fèi)了，最近我的Mac電腦上裝的Typora，已經(jīng)開(kāi)始提示我升級(jí)。而且，整理我的《面渣逆襲手冊(cè)》的時(shí)候，因?yàn)槲募螅琓ypora非常卡頓，所以，思來(lái)想去，我決定用VS Code搭建一套MarkDwon寫作環(huán)境。

一、VS Code安裝

VS Code的安裝就不用多說(shuō)了，從官網(wǎng)下載對(duì)應(yīng)版本的安裝包，安裝即可。【推薦學(xué)習(xí)：《vscode入門教程》】

官網(wǎng)下載地址：code.visualstudio.com/Download

這是我的Windows電腦上安裝的VS Code，注意看，我的頂欄、側(cè)邊欄都是中文的，因?yàn)榘惭b了中文的插件：

二、MarkDown插件增強(qiáng)

我們來(lái)看一下直接用VS Code打開(kāi)MarkDown文件的效果：

右上角可以打開(kāi)雙欄預(yù)覽：

看起來(lái)，還可以，但還有改進(jìn)的空間，我們可以安裝一些插件來(lái)讓它變得更好。

1. Markdown All in One

Markdown All in One是一款多合一的MardDown增強(qiáng)插件：

它號(hào)稱支持Markdown所需要的一切功能，包括鍵盤快捷鍵、目錄、自動(dòng)預(yù)覽等等，可以看一下它的擴(kuò)展頁(yè)，或者倉(cāng)庫(kù)說(shuō)明文檔：

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

2.Markdown Image

Markdown Image主要是對(duì)MarkDown中插入圖片的擴(kuò)展，支持將圖片放在本地或第三方的圖床或?qū)ο蟠鎯?chǔ)。

使用這個(gè)插件，可以做到類似Typora的直接復(fù)制本地圖片，然后粘貼進(jìn)MarkDown，圖片文件默認(rèn)是放在本地，也可配置支持 Imgur，七牛，SM.MS，Coding 等圖床。

安裝完這個(gè)插件之后，可以做一些配置，進(jìn)配置頁(yè)，搜索：markdown-image，可以配置一下相對(duì)路徑，默認(rèn)圖片文件保存在/res路徑下。

使用快捷鍵Shift+Alt+V就可以直接將剪貼板里面復(fù)制好的圖片粘貼進(jìn)文檔里：

3.Markdown Preview Enhanced

Markdown Preview Enhanced是對(duì)VS Code預(yù)覽功能的增強(qiáng)，可以改善VS Code的預(yù)覽體驗(yàn)。

安裝這個(gè)插件以后，點(diǎn)擊預(yù)覽按鈕，就會(huì)使用增強(qiáng)的預(yù)覽：

還可以在邊欄顯示目錄，不過(guò)顯示了目錄，整個(gè)界面就顯得有些逼仄。

它同樣也提供多個(gè)預(yù)覽主題：

4.Word Count CJK

Word Count CJK是一個(gè)用來(lái)統(tǒng)計(jì)中文字?jǐn)?shù)的插件：

對(duì)于我這種愛(ài)肝長(zhǎng)文的人來(lái)講，看到文章的字?jǐn)?shù)，也是滿滿的成就感了。

5.MarkDown Editor

如果說(shuō)我們就是要Typora所見(jiàn)即所得的體驗(yàn)?zāi)兀?/p>

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

安裝完成之后，對(duì)MD文件選擇Open with MarkDown Editor就可以所見(jiàn)即所得地打開(kāi)MD文件了。

還有一些其它的插件：

• markdownlint：markdow格式檢查
• Markdown Preview Github Styling：GitHub主題預(yù)覽

大家也可以去體驗(yàn)一下。

三、圖床搭建

使用MarkDown寫作，還有一個(gè)重要的需求，就是圖床，我們寫的文章是要發(fā)布出去的，MD中的圖片是以路徑形式保存，本地的路徑發(fā)布出去可沒(méi)法訪問(wèn)，所以我們需要給MD編輯器接入圖床的功能。

我之前用Typora+PicGo+Gitee搭建了一版圖床，后來(lái)Gitee出了那檔子事，又換成了Typora+PicGo+Github，我們也照這個(gè)思路，在VS Code上搭建一版圖床。

1.GitHub倉(cāng)庫(kù)配置

2.1. 創(chuàng)建一個(gè)新的倉(cāng)庫(kù)

創(chuàng)建一個(gè)新的GitHub倉(cāng)庫(kù)：

• 公開(kāi)，必須的，防止訪問(wèn)不到
• 添加一個(gè)READM文件，防止倉(cāng)庫(kù)沒(méi)有主干分支

2.2. 生成token

• 進(jìn)入settings

• 找到developer settings

• 創(chuàng)建新的Personal access tokens，時(shí)間設(shè)置為永不過(guò)期，給repo權(quán)限就可以了

• 生成的Token要記下來(lái)，只顯示一次

2. 安裝配置PicGo

2.1.安裝PicGO插件

在VS Code里搜索PicGo，安裝：

2.2.配置PicGO

• 打開(kāi)PicGo的擴(kuò)展配置

• 配置uploader，選擇github

• GitHub相關(guān)配置，以我的配置為例：

  • Branch：main，分支

  • Path：空，也可以配置一個(gè)相對(duì)路徑

  • Custome Url：空，

    其實(shí)可以配置一個(gè)CDN加速的url，jsDeliver，它是一個(gè)免費(fèi)的CDN，最近似乎不可用了，大家也可以試一下，它的使用方法：https://cdn.jsdelivr.net/gh/你的github用戶名/你的倉(cāng)庫(kù)名@發(fā)布的版本號(hào)——cdn.jsdelivr.net/gh/fighter3…

  • Repo：fighter3/picgo-win，用戶名/倉(cāng)庫(kù)格式

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

3.圖床使用

• 打開(kāi)MD文件，從別的地方粘貼一個(gè)圖片，使用 Ctrl + Alt + U，可以看到文件成功上傳，并且可以預(yù)覽

圖片上傳相關(guān)的快捷鍵：

用GitHub當(dāng)圖床整體上還是不太理想，上傳和訪問(wèn)都不太穩(wěn)定，我們也可以在PicGo插件里把圖床換成七牛、或者騰訊云、阿里云，大體上過(guò)程類似，也比較簡(jiǎn)單。