用VsCode優雅寫MarkDown

ming_zero發表於2024-11-30
VSCode

外掛推薦

  • Markdown All in One

    快捷鍵 作用
    Ctrl + B 加粗
    Ctrl + I 斜體
    Alt + S 刪除線
    Ctrl + ] 增加縮排
    Ctrl + [ 減少縮排
    Ctrl + Shift + ] 標題升級
    Ctrl + Shift + [ 標題降級
    Alt + C 勾選/取消勾選任務列表
    Ctrl + M 數學環境
    Alt + Shift + F 表格格式化
    Ctrl + K V 開啟預覽視窗
    Ctrl + Shift + V 開啟新的預覽視窗

    任務列表語法

    • 任務列表格式：- [ ] 任務名
    • 任務列表勾選：- [x] 任務名
    • 生成目錄：Ctrl+Shift+P，輸入Markdown All in One: TOC
    • 給標題生成序號：Ctrl+Shift+P，輸入add section numbers

  • markdownlint

    • 設定格式化程式：文件中右鍵【使用 ... 格式化文件】-【配置預設格式化程式】選擇 markdownlint
    • 快捷鍵
      • 檢視開啟的所有 Tab 標籤文件中語法警告：Ctrl+Shift+M
      • 檢視當前位置警告資訊：F8

  • Markdown Preview Enhanced：官方文件

  • Pangu-Markdown：自動在中英文之間插入空格

    • 方法一：Ctrl+Shift+P，輸入Pangu Format

    • 方法二：在使用者 JSON 配置檔案中配置

      "pangu.auto_format_on_save": true

圖片貼上

下面我使用 Paste Image 外掛和內建的 copyFiles 功能進行配置（個性化低）

Paste Image

// 用 Paste Image 配置圖片
// 設定貼上圖片時的預設檔名格式為 年-月-日-時-分-秒
"pasteImage.defaultName": "Y-MM-DD-HH-mm-ss",
// 設定圖片儲存路徑為當前檔案所在目錄下的 assets/當前檔名(不含副檔名) 資料夾
"pasteImage.path": "${currentFileDir}/assets/${currentFileNameWithoutExt}",
// 設定插入圖片的 Markdown 語法格式
"pasteImage.insertPattern": "![${imageFileName}](${imageFilePath})",

copyFiles

缺點是不可以更改儲存圖片的檔名

// 配置 MarkDown 文件插入圖片自動儲存到檔案所在目錄的 assets/${documentBaseName} 下
"markdown.copyFiles.destination": {
  "*.md": "assets/${documentBaseName}/"
}

最後

// ============================================MarkDown============================================
"[markdown]": {
  "diffEditor.ignoreTrimWhitespace": true, // 在差異編輯器中忽略空格差異
  "editor.formatOnSave": true, // 儲存時自動格式化文件
  "editor.defaultFormatter": "DavidAnson.vscode-markdownlint", // 設定預設的 Markdown 格式化工具
  "editor.minimap.enabled": false, // 關閉編輯器右側的小地圖以減少視覺干擾
  "editor.glyphMargin": false, // 關閉字形邊距以獲得更簡潔的編輯介面
  "editor.renderWhitespace": "all" // 顯示所有空白字元，方便檢視和編輯空格、製表符等
},
// 配置 markdownlint 配置
"markdownlint.config": {
  // 格式化程式碼塊允許 $ 開頭
  "MD014": false,
  // 允許多個一級標題
  "MD025": false,
  // 允許圖片標籤alt為空
  "MD045": false
},
// 用 Paste Image 配置圖片
// 設定貼上圖片時的預設檔名格式為 年-月-日-時-分-秒
"pasteImage.defaultName": "Y-MM-DD-HH-mm-ss",
// 設定圖片儲存路徑為當前檔案所在目錄下的 assets/當前檔名(不含副檔名) 資料夾
"pasteImage.path": "${currentFileDir}/assets/${currentFileNameWithoutExt}",
// 設定插入圖片的 Markdown 語法格式
"pasteImage.insertPattern": "![${imageFileName}](${imageFilePath})",

// 配置 MarkDown 文件插入圖片自動儲存到檔案所在目錄的 assets/${documentBaseName}.assets 下，插入的圖片的檔案是時間戳
"markdown.copyFiles.destination": {
  "*.md": "assets/${documentBaseName}/"
}
// ============================================MarkDown============================================

參考

  • VSCode 中優雅地編寫 Markdown
  • 在 VSCode 中編寫 Markdown 的進階指南

相關文章