使用VSCode编辑Markdown的几个常用设置

1. 中文的自动换行

VSCode的默认换行算法无法正确处理中文段落的换行。因为中文不像英文每个单词之间都有空格，所以经常出现换行位置超过屏幕范围的情况。例如

可以看到，有十个汉字还在第一行的右边，需要拖动水平滚动条才能看见。

这个可以通过修改控制计算换行位置的算法^[1]来解决。添加配置

"editor.wrappingStrategy": "advanced"

就可以解决这个问题。此时VSCode显示的内容就变成了

这时换行位置基本就正常了。偶尔超出屏幕一点，最多也就吞掉半个字。

2. 粘贴图片

之前的时候，一旦需要添加图片，我都会转而使用Typora编辑Markdown文件。

Typora的优点是具有可视化，表格编辑方便；VSCode的优点是可以在编辑数学公式的时候自动切换中英文输入法（通过我自己修改过的插件，原插件已失效）。

好在，同时需要大量编辑数学公式和大量添加图片的情况对于我来说基本上不存在。

不过，新版的VSCode其实已经支持了图片复制和插入^[2]。直接把图片拖入到VSCode中，可以看到「按住Shift以放入编辑器」的提示。此时按住Shift再放开鼠标，图片就被复制到Markdown文件所在的目录，并插入到了Markdown中。

不过，根据Hexo的文档结构，我需要把图片放到和Markdown文件同名的文件夹中，因此需要添加配置：

"markdown.copyFiles.destination": {
  "/source/**/*": "${documentBaseName}/"
},

这样图片就能直接复制到所需的位置了。

3. 预览SVG图像

我使用 pdf2svg 生成的SVG图像都是透明背景的，而VSCode又是深色背景，此时打开SVG图片根本看不清。添加配置

"svg.preview.background": "white"

这样就默认是白色背景了。

4. 数学公式

我的博客现在设置了 text-autospace: normal，这样浏览器可以自动在中英文字符之间增加间距，就不用手动添加空格了。

但是可惜的是，这个对于使用KaTeX插入的数学公式并不起作用，因此还是需要在公式两边手动添加空格。

我的方法是使用快捷键 Ctrl+m，手动添加数学环境及空格。快捷键设置如下：

{
  "key": "ctrl+m",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus && editorLangId =~ /latex|latex-expl3|typst|markdown/",
  "args": {
    "snippet": " $${TM_SELECTED_TEXT}$1$ $0"
  }
}

但是这会带来一个问题。如果数学公式之后是标点符号，此时是不需要添加空格的，因此还需要手动删掉。如果每次输入的时候删除的话会非常麻烦。在使用LaTeX的时候，我是使用 latexindent 来进行完成格式化的，对应的 localSettings.yaml 配置如下：

replacements:
  - substitution: s/([，。；：、！？（）【】])\h+(\$+)/$1$2/g
  - substitution: s/(\$+)\h+([，。；：、！？（）【】])/$1$2/g

但是Markdown文件没有类似的软件。

我最终是通过「Run on Save」插件来完成这个任务的。安装插件以后，添加配置

"runOnSave.commands": [
  {
    "match": ".*\\.md$",
    "command": "sed -i -E -e 's/\\$+\\s+([，。！？；：、（）【】「」『』])/\\$\\1/g' -e 's/([，。！？；：、（）【】「」『』])\\s+\\$+/\\1\\$/g' ${file}",
  },
]

这样在保存Markdown文档的时候会自动运行 sed 命令，删掉多余的空格。

---

1. 更新来自1.42版本 ↩︎

2. 更新来自1.79版本 ↩︎