用VsCode优雅写MarkDown

插件推荐

• 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 的进阶指南