在 VSCode 中編寫 Markdown 的進階指南

cjyyxn發表於2024-06-28
VSCode

最新版的 Visual Studio Code 對 Markdown 的支援已顯著提升，其在預覽方面的體驗甚至可以與 Markdown Preview Enhanced 外掛相比。本文將介紹一些最佳化方法，幫助使用者提升在 VSCode 中編寫 Markdown 文件的體驗。

官方使用說明：https://code.visualstudio.com/docs/languages/markdown

預覽常規設定

開啟 VSCode 的 markdown.preview 設定，可以看到一些設定選項，如字型、字號、行高等。

使用 CSS

VSCode中Markdown 預覽實際上是一個網頁，因此可以透過自定義 CSS 來最佳化其顯示效果。

開啟 markdown.styles 設定，可以新增 CSS 檔案路徑。支援兩種檔案路徑：

  1. 相對路徑。相對路徑是相對於資源管理器中開啟的資料夾進行解釋的。如果沒有開啟的資料夾，則相對於 Markdown 檔案的位置解釋它們。
  2. CSS 檔案的 HTTPS URL。

數學公式預覽最佳化

開啟 vscode 自帶的開發者工具，可以看到所有數學公式都有 class="katex" 。

目前存在的問題是數學公式太小，於是可以在工作區本地建立 CSS 檔案，內容為：

.katex {
    font-size: 1.25em !important;
}

然後將該檔案路徑新增到 markdown.styles 設定中，即可最佳化公式顯示效果。

我也建立了該 CSS 檔案的 HTTPS URL：https://blog-static.cnblogs.com/files/blogs/825243/vscode-markdown-style.css。

圖片大小調整

一種方案是使用 HTML 標籤：

<img src="assets/xxx.png" style="width:80%;" />

另一種方案是透過 CSS 設定：

img{
    width: 80%;
    padding-left: 10%;
}

這段程式碼將所有圖片的寬度設定為段落寬度的 80%，並向右移動 10%，從而實現居中顯示。基於此，可以進一步細化設定，如下所示：

img[src*="#w100"] {
width: 100%;
}

img[src*="#w80"] {
width: 80%;
}

img[src*="#w60"] {
width: 60%;
}

img[src*="#w50"] {
width: 50%;
}

img[src*="#w30"] {
width: 30%;
}

img[src*="#w20"] {
width: 20%;
}

img[src*="#w10"] {
width: 10%;
}

此時，可以透過在 Markdown 中使用特定格式來調整圖片大小：

![img.png](assets/xxx.png#w60)

編輯器體驗最佳化

為了最佳化在 VSCode 中編寫 Markdown 的體驗，在使用者 settings.json 中使用如下配置：

"[markdown]": {
    "editor.minimap.enabled": false, // 關閉編輯器右側的小地圖以減少視覺干擾
    "editor.glyphMargin": false, // 關閉字形邊距以獲得更簡潔的編輯介面
    "editor.renderWhitespace": "all" // 顯示所有空白字元，方便檢視和編輯空格、製表符等
}

圖片貼上

VSCode 的 Paste Image 外掛和內建的 copyFiles 功能可以簡化圖片貼上操作。

Paste Image 外掛設定如下。此時使用 Ctrl+Shift+V 可以把剪下板上的圖片儲存到工作區的 assets 資料夾中，並在 md 檔案中插入圖片路徑。

VSCode 的 markdown.copyFiles 設定如下。

此時使用 Ctrl+V 快捷鍵也可以儲存剪下板上的圖片到工作區的 assets 檔案中，並在 md 檔案中插入路徑。區別在於：

  1. VSCode 內建的 copyFiles 功能還可以貼上圖片和音訊檔案。
  2. Paste Image 外掛儲存的圖片可以自動生成 Y-MM-DD-HH-mm-ss 的檔名，而 copyFiles 功能則不行。

因此建議這兩種方法配合使用。

格式化

markdownlint 外掛提供了格式化 Markdown 程式碼功能，並會對不規範的 markdown 程式碼進行警告。建議在使用者 settings.json 中使用如下配置

"[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
    "editor.formatOnSave": true,
},
"markdownlint.config": {
    "MD012": false,
    "MD018": false,
    "MD024": false,
    "MD025": false,
    "MD033": false,
    "MD036": false,
    "MD041": false,
    "MD045": false,
},

Pangu-Markdown 外掛補充了格式化功能，如在中英字元之間插入空格。使用方法為右鍵點選 Pangu Format。

程式碼補全與快捷功能

Markdown All in One 外掛可以補全 markdown 程式碼，包括 LaTeX 函式程式碼。同時也提供了一些編輯 Markdown 的快捷功能。

Better Markdown & Latex Shortcuts 外掛提供了一些編輯 LaTeX 公式的快捷鍵。

功能擴充

Markdown Footnotes 外掛讓 VSCode 的 markdown 預覽支援腳註功能，例如：

這是一個腳註 [^1]

[^1]: 腳註 1

Markdown Image Size 外掛提供了調整圖片大小的擴充語法。但是該語法應用並不普遍，因此不推薦使用。

匯出 PDF 和 Word 文件

Markdown Preview Enhanced 外掛支援匯出為 PDF 和 Word 文件。其利用 Chrome (Puppeteer) 匯出 PDF 檔案使用說明為 https://www.cnblogs.com/cjyyx/p/18272365。

Markdown Preview Enhanced 外掛匯出的 PDF 顯示效果並不好，因此我更推薦使用 Typora 軟體匯出。

部落格寫作

部落格園 cnblogs 客戶端 和 Zhihu On VSCode 外掛都提供了比較好的部落格寫作體驗。

Markdown Publisher For CSDN/JIANSHU/ZHIHU/JUEJIN/WECH 外掛支援 Markdown 文件多平臺一鍵釋出，但目前使用體驗較差。

相關文章