摘要：這篇文章主要介紹我本人搭建Markdown編輯環境的全過程，并記錄下在這個過程中所遇到的問題及解決方法。

一、VS Code安裝

進入VS Code官網:VS Code官網
然后根據自己的電腦下載對應版本：Window建議下載System Installer(這個版本可以修改安裝路徑)

然后同意協議、下一步，就OK了

VS Code安裝完后會自動彈出一個詢問是否安裝中文插件的界面，直接點安裝即可

如果沒有，可以直接在擴展(快捷鍵：Ctrl+Shift+X)中搜索：Chinese (Simplified) (簡體中文) Language Pack for Visual Studio Code，然后點擊安裝

二、MPE插件安裝

Markdown Preview Enhanced插件(簡稱MPE)的安裝和簡體中文一樣，也是直接在擴展中搜索Markdown Preview Enhanced，然后安裝即可

正確安裝MPE后，VS Code文本編輯區域右上角會出現如下圖標(點擊該圖標就可以實現實時渲染)

另外，在MPE插件的細節中有一份特性說明文檔，其介紹了如何在MPE中使用Pandoc、自定義預覽CSS、生成toc等功能的配置，講得非常詳細，建議大家仔細看看

三、Pandoc

Markdown Preview Enhanced支持pandoc文檔導出特性，并且兼容各種文本格式，例如：pdf、Word、html等

最棒的是可以自定義導出樣式，極大地減少了Markdown轉Word二次排版的痛苦

3.1 Pandoc安裝

進入Pandoc官網下載安裝包，然后直接安裝即可

然后進入MPE的擴展設置中，設置Pandoc的可執行程序路徑

有時候可能無法打開擴展設置，提示“當前工作區不受信任”，此時需要手動信任該插件并重啟軟件

3.2 front Matter

Pandoc安裝后在MPE預覽區單擊右鍵，就會出現Pandoc導出選項，單擊即可導出文檔，但大多數新手通常會遇到如下提示：

Error: Output format needs to be specified.

出現這個問題，是因為我們的文檔沒有增加front matter

將front matter編輯在文檔頭部，如下圖，然后再重新選擇Pandoc導出即可(各位可以根據喜歡的格式編寫front Matter，并且Pandoc還可以使用自定義樣式來導出docx文檔)

附上圖片中front matter代碼：

--- title: Markdown編輯環境搭建 author: Wcat date: 2022年10月16日 # 指定漢字字體，如果缺少中文顯示將不正常 CJKmainfont: 方正蘇新詩柳楷簡體-yolanlatex 選項 fontsize: 12pt linkcolor: blue urlcolor: green citecolor: cyan filecolor: magenta toccolor: red geometry: margin=0.3in papersize: A4 documentclass: article# pandoc設置 output:word_document:path: C:/Users/Wcat/Desktop/Habits.docx # 打印背景色 # 保存文件時自動生成 # export_on_save: # pandoc: true ---

四、圖床搭建

4.1 創建倉庫

登陸GitHub賬戶(沒有可自行注冊)，進入GitHub主界面，點擊New或者Create a new repository都可以

填寫倉庫的基本信息后，點擊創建倉庫即可

4.2 配置picgo

搭建圖床我們使用的是picgo插件，其安裝方式同MPE

然后需要在GitHub生成token,操作如下：點擊settings–>developer settings–>Personal access tokens–>generate new token–>填寫名稱、勾選repo–>generate token；具體操作可參考文章：在VS Code中使用 Picgo + jsDelivr + Github搭建高速穩定圖床

然后進入到picgo的擴展設置，按照圖示進行配置(其中https://cdn.jsdelivr.net/gh是用來加速優化網站打開速度的)

使用快捷鍵Ctrl+Alt+E插入圖片到Markdown文檔中，如果上傳成功會有如下提示，同時進入GitHub倉庫也能看到上傳的圖片

此時刷新下MPE即可在預覽區顯示圖片，如果無法顯示，可以將圖片網址復制到瀏覽器看是否能顯示圖片

如果出現“無法訪問此網站，檢查raw.githubusercontent.com中是否有拼寫錯誤”，可以按照如下步驟解決：

進入IP或域名查詢網站,在搜索框輸入：raw.githubusercontent.com，點擊查詢

逐一去ping解析出來的IP地址，選出延遲低的IP地址

然后找到C:\Windows\System32\drivers\etc中的hosts文件，用記事本打開，在最后添加以下內容

185.199.108.133 raw.githubusercontent.com

重啟VS Code，刷新MPE預覽區即可

參考資料

在VS Code中使用 Picgo + jsDelivr + Github搭建高速穩定圖床

win10 解決raw.githubusercontent.com無法連接問題

pandoc如何使用自定義樣式導出docx文檔

總結

以上是生活随笔為你收集整理的markdown编辑环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。