在vscode裡編寫markdown文檔
- 在vscode裡編寫markdown文檔
- 使用markdownlint來控制格式
- Markdown Preview Enhanced
- TOC目錄
- 導出pdf
- 借助浏覽器導出
- Chrome（Puppeteer）
- PicGo插件
我最開始是在Atom裡寫markdown，後面換到了vscode，配合多款插件，還是挺順手的。
這裡貼一下自己的markdown文法助計圖：
背景高亮這個不是所有markdown編輯器都識别，是以現在我也用的少了。
還有一些我寫github文檔會用到的文法：
- 用
<kbd></kbd>
- 用diff來辨別代碼塊，可以像可視化的git diff那樣，展示代碼或者檔案的更改删減
+ about.html
- variable.css
csdn部落格好像不支援，貼圖展示下效果：
使用markdownlint來控制格式
我是那種會花時間去整一套自己順眼的eslint規則的人，
markdownlint
這個插件則是治愈了我對于markdown文檔格式的強迫症：
從此每次寫完文檔，總要看一下縮略圖裡有沒有格式錯誤提醒，它的一些規則包括：
- 标題級數每次隻能遞增1，也就是上一個标題是2級，那麼下一個不能直接是4級
- 标題前後要空行
- 行尾不能空格
- 不能連續空行
它的規則其實很多，這裡隻列出來了幾條，全部規則可以去看markdownlint github倉庫；有些預設的規則自己不喜歡的話，可以去vscode的
setting.json
裡面關掉（快捷鍵Ctrl+Shifit+P打開設定）：
{
"MD024":false
}
這裡我就關閉了"MD024"這條規則，這樣，我的檔案裡就可以出現内容重複的标題。
也可以在文檔粘貼和儲存的時候，自動fix有問題的地方，在
settings.json
中這樣配置：
"[markdown]":{
"editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
"editor.formatOnSave":true,
"editor.formatOnPaste":true
}
markdown文檔格式出了問題的話，可以在vscode的“問題”視窗檢視，比如最後一行之後沒有空行，視窗就會提示：
MD047/single-trailing-newline: Files should end with a single newline character
不過用習慣了之後，一般都不需要儲存時格式化了，自己就按照規則去寫了。
Markdown Preview Enhanced
這款插件在Atom上也有，我用的最多就是它的markdown預覽功能，因為寫文檔和插入圖檔的時候，還是想實時看到效果，在vscode中，裝完這個插件後，打開一個markdown文檔，會在标簽欄看到這幾個圖示：
點選第二個圖示，就可在右側的分欄區域，預覽目前markdown文檔顯示效果；
TOC目錄
另外就是它的TOC目錄生成功能，在開啟MPE預覽的情況下，在文檔中輸入
[TOC]
，就可以在此處插入目前文檔的目錄（左側為文檔，右側為預覽）：
這樣能讓我對文檔的結構有個更清晰的認識，不過這種方式建立的目錄，隻在預覽中顯示，不會修改markdown文檔；
我們還可以更細粒度地控制目錄的生成，比如控制目錄從第二級開始生成：
在檔案頭添加
front-matter
：
這裡我就設定了
depth_from: 2
，這樣一級标題就不會在目錄中顯示：
那如果想在markdown文檔裡也生成目錄的話，可以通過Ctrl+Shifit+P 然後運作
Markdown Preview Enhanced: Create Toc
指令來建立目錄，在保持預覽打開的情況下，儲存就能生成目錄：
導出pdf
有時候，我們需要把markdown文檔，轉成pdf，MPE插件也提供了這個功能；
借助浏覽器導出
在MPE預覽界面，單擊滑鼠右鍵，在彈出的菜單裡選擇“ Open in Browser ”，文檔就會在浏覽器中打開，然後在浏覽器右鍵菜單中選擇“列印”即可：
Chrome（Puppeteer）
覺得上面這個步驟繁瑣的話，如果安裝了Chrome浏覽器，也可以直接選擇 Chrome （Puppeteer）方式直接導出PDF檔案； 檔案預設和markdown檔案同名，然後會在同一個目錄下生成，還是比較友善的。
MPE 也提供了多種導出格式，像HTML、epub、mobi等，大家可以選擇自己喜歡的格式，也可以在“Preview Theme”中更改預覽樣式。
MPE 功能挺強大的，可以去看看它的文檔。
PicGo插件
最後要推薦的就是
PicGo
插件，之前我用的是桌面版：
我用的是阿裡雲OSS，在“圖床設定”中填入 KeyId 、 KeySecret 以及 Bucket 等資訊就可以了：
PicGo支援剪貼闆圖檔上傳、URL上傳、本地檔案上傳等，vscode裡面的PicGo基本的配置步驟和功能和桌面版的也差不多，可以在“設定”中，進行PicGo插件的配置：
填入圖床的資訊，把常用圖床設定成預設即可，這樣就可以在編寫markdown的時候，使用快捷鍵Ctrl+Alt+U将剪貼闆的圖檔快速上傳到OSS，并自動将圖檔連結貼到文檔中，體驗非常好。
PicGo除了阿裡雲OSS外，還支援七牛雲、騰訊雲、github圖床等，大家選擇自己常用的即可。