天天看點

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

在vscode裡編寫markdown文檔

  • 在vscode裡編寫markdown文檔
    • 使用markdownlint來控制格式
    • Markdown Preview Enhanced
      • TOC目錄
      • 導出pdf
        • 借助浏覽器導出
        • Chrome(Puppeteer)
    • PicGo插件

我最開始是在Atom裡寫markdown,後面換到了vscode,配合多款插件,還是挺順手的。

這裡貼一下自己的markdown文法助計圖:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

背景高亮這個不是所有markdown編輯器都識别,是以現在我也用的少了。

還有一些我寫github文檔會用到的文法:

  • <kbd></kbd>

    标簽來讓文字看起來像鍵盤按鍵,描述快捷鍵組合的時候,可以用這個,比如Ctrl+K
  • 用diff來辨別代碼塊,可以像可視化的git diff那樣,展示代碼或者檔案的更改删減
+ about.html
- variable.css
           

csdn部落格好像不支援,貼圖展示下效果:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

使用markdownlint來控制格式

我是那種會花時間去整一套自己順眼的eslint規則的人,

markdownlint

這個插件則是治愈了我對于markdown文檔格式的強迫症:

在vscode裡編寫markdown文檔在vscode裡編寫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文檔,會在标簽欄看到這幾個圖示:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

點選第二個圖示,就可在右側的分欄區域,預覽目前markdown文檔顯示效果;

TOC目錄

另外就是它的TOC目錄生成功能,在開啟MPE預覽的情況下,在文檔中輸入

[TOC]

,就可以在此處插入目前文檔的目錄(左側為文檔,右側為預覽):

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

這樣能讓我對文檔的結構有個更清晰的認識,不過這種方式建立的目錄,隻在預覽中顯示,不會修改markdown文檔;

我們還可以更細粒度地控制目錄的生成,比如控制目錄從第二級開始生成:

在檔案頭添加

front-matter

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

這裡我就設定了

depth_from: 2

,這樣一級标題就不會在目錄中顯示:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

那如果想在markdown文檔裡也生成目錄的話,可以通過Ctrl+Shifit+P 然後運作

Markdown Preview Enhanced: Create Toc

指令來建立目錄,在保持預覽打開的情況下,儲存就能生成目錄:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

導出pdf

有時候,我們需要把markdown文檔,轉成pdf,MPE插件也提供了這個功能;

借助浏覽器導出

在MPE預覽界面,單擊滑鼠右鍵,在彈出的菜單裡選擇“ Open in Browser ”,文檔就會在浏覽器中打開,然後在浏覽器右鍵菜單中選擇“列印”即可:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

Chrome(Puppeteer)

覺得上面這個步驟繁瑣的話,如果安裝了Chrome浏覽器,也可以直接選擇 Chrome (Puppeteer)方式直接導出PDF檔案; 檔案預設和markdown檔案同名,然後會在同一個目錄下生成,還是比較友善的。

MPE 也提供了多種導出格式,像HTML、epub、mobi等,大家可以選擇自己喜歡的格式,也可以在“Preview Theme”中更改預覽樣式。

MPE 功能挺強大的,可以去看看它的文檔。

PicGo插件

最後要推薦的就是

PicGo

插件,之前我用的是桌面版:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

我用的是阿裡雲OSS,在“圖床設定”中填入 KeyId 、 KeySecret 以及 Bucket 等資訊就可以了:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

PicGo支援剪貼闆圖檔上傳、URL上傳、本地檔案上傳等,vscode裡面的PicGo基本的配置步驟和功能和桌面版的也差不多,可以在“設定”中,進行PicGo插件的配置:

在vscode裡編寫markdown文檔在vscode裡編寫markdown文檔

填入圖床的資訊,把常用圖床設定成預設即可,這樣就可以在編寫markdown的時候,使用快捷鍵Ctrl+Alt+U将剪貼闆的圖檔快速上傳到OSS,并自動将圖檔連結貼到文檔中,體驗非常好。

PicGo除了阿裡雲OSS外,還支援七牛雲、騰訊雲、github圖床等,大家選擇自己常用的即可。

繼續閱讀