聊聊VSCode中怎麼建構MarkDown寫作環境

Typora收費了？以下這篇文章跟大家介紹一下VSCode中建構MarkDown寫作環境的方法， 開源軟體，完全值得信賴！強烈推薦！

我平常用的最習慣的MarkDown寫作工作是Typora，所見即所得的用戶體驗，再加上豐富的主題，讓人忍不住直呼「真香」。

但大家都知道，Typora1.0之後，它就開始收費了，最近我的Mac電腦上裝的Typora，已經開始提示我升級。而且，整理我的《面渣逆襲手冊》的時候，因為文件太大，Typora非常卡頓，所以，思來想去，我決定用VS Code搭建一套MarkDwon寫作環境。

一、VS Code安裝

VS Code的安裝就不用多說了，從官網下載對應版本的安裝包，安裝即可。 【推薦學習：《vscode入門教學》】

#官網下載位址：code.visualstudio.com/Download

這是我的Windows電腦上安裝的VS Code，注意看，我的頂欄、側邊欄都是中文的，因為安裝了中文的插件：

二、MarkDown外掛增強

我們來看看直接用VS Code開啟MarkDown檔案的效果：

##右上角可以打開雙欄預覽：

看起來，還可以，但還有改進的空間，我們可以安裝一些插件來讓它變得更好。

1. Markdown All in One

Markdown All in One是一款多合一的MardDown增強外掛：

它號稱支援Markdown所需的一切功能，包括鍵盤快捷鍵、目錄、自動預覽等等，可以看一下它的擴充頁，或是倉庫說明文件：

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主要是對MarkDown中插入圖片的擴展，支援將圖片放在本地或第三方的圖床或物件儲存。

使用這個插件，可以做到類似Typora的直接複製本地圖片，然後貼上進MarkDown，圖片檔案預設是放在本地，也可配置支援

Imgur，七牛，SM.MS，Coding 等圖床。

安裝完這個外掛程式之後，可以做一些配置，進設定頁，搜尋：

markdown-image，可以設定相對路徑，預設圖片檔案保存在/res路徑下。

使用快速鍵

Shift Alt V就可以直接將剪貼簿裡面複製好的圖片貼進文件裡：

3.Markdown Preview Enhanced

Markdown Preview Enhanced是對VS Code預覽功能的增強，可以改善VS Code的預覽體驗。

安裝這個外掛程式以後，點選預覽按鈕，就會使用增強的預覽：

還可以在側邊欄顯示目錄，不過顯示了目錄，整個介面就顯得有些逼仄。

它也提供多個預覽主題：

4.Word Count CJK

Word Count CJK是用來統計中文字數的外掛程式：

#對於我這種愛肝長文的人來講，看到文章的字數，也是滿滿的成就感了。

5.MarkDown Editor

#如果說我們就是要Typora所見即所得的體驗呢？

我也找到了一個外掛MarkDown Editor：

#安裝完成之後，對MD檔案選擇Open with MarkDown Editor就可以所見即所得地開啟MD文件了。

還有一些它的插件：

• 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文件，防止倉庫沒有主幹分支

2.2. 產生token

• 進入settings

• ##找到developer settings

• 建立新的Personal access tokens，時間設定為永不過期，給repo權限就可以了

• 產生的Token要記下來，只顯示一次

2. 安裝設定PicGo

#2.1.安裝PicGO外掛程式

在VS Code裡搜尋PicGo ，安裝：

2.2.設定PicGO

開啟PicGo的擴充配置

#配置uploader，選擇github

• #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：填之前儲存的就行了

3.圖床使用

• 開啟MD文件，從別的地方貼上一個圖片，使用Ctrl Alt U，可以看到文件成功上傳，並且可以預覽

圖片上傳相關的快捷鍵：

OS	從貼上版上傳圖片	從瀏覽器上傳圖片	從輸入框上傳圖片
Windows/ Unix	Ctrl Alt U	Ctrl Alt E	Ctrl Alt O
OsX	Cmd Opt U	#Cmd Opt E	Cmd Opt O

用GitHub當圖床整體上還是不太理想，上傳和存取都不太穩定，我們也可以在PicGo插件裡把圖床換成七牛、或者騰訊雲、阿里雲，大體上過程類似，也比較簡單。

更多關於VSCode的相關知識，請造訪：vscode教學！

以上是聊聊VSCode中怎麼建構MarkDown寫作環境的詳細內容。更多資訊請關注PHP中文網其他相關文章！