Markdown 插入图片时自动拷贝——以 Typora 和 VS Code 为例

发表于 2023-07-22 分类于 softwares 本文字数： 1.1k 阅读时长 ≈ 4 分钟

序言

随着 Markdown 的普及，使用传统文本编辑器写作的效率显得低下，尤其表现在一些复杂语法，比如插入表格，或者插入图片。

Typora 作为业界知名的 Markdown 编辑器，除了著名的『即时渲染』，也拥有很多方便书写 Markdown 的功能，比如插入图片时的自动保存：往一个 Markdown 文件（文本文件）中粘贴一张图片，该图片便会自动保存到指定路径，并且自动在 Markdown 中建立好引用。

对于经常用 Markdown 记笔记的我来说，这一功能应该成为业界的标准。但是，另一款常用的编辑器 —— VS Code —— 对这一功能的支持并不好。当然，我们也不应该苛求这样一款免费、通用的编辑器能够面面俱到。

对于经常记笔记的用户，截图并插入 Markdown 是一个常见的需求。在这一操作的背后，有两个方面关乎着用户体验：1️⃣ 截图工具 2️⃣Markdown 编辑器。

在截图工具一致的情况下，Markdown 编辑器是决定用户体验的关键因素。下面我将展开介绍 3 种编辑器是如何插入图片的。

这种编辑器通常只是支持 Markdown 语法高亮的“记事本”，比如 vim，sublime 等。

当我们截图完毕后，需要先将图片存储到本地，再使用 Markdown 语法手动引用该图片的路径：

1	![alt text](image.jpg)

出于方便，截图软件往往会将图片都存储到特定路径下。为了单独存放每个 Markdown 文件相关的图片，我们还需要手动地剪切图片的位置。很麻烦！

Typora 为插入图片提供了多种功能，我最常用的是『复制图片到指定路径』。

这里的『插入图片』，是指鼠标拖动图片到 Typora 中，或者从剪贴板（win + v）中粘贴

我选择保存到与当前 Markdown 文件同目录下的MarkDownImages文件夹下（没有会自动创建）。当然，更好的做法应该是选择『复制图片到 ./${filename}.assets 文件夹』，这样方便 Markdown 文件的迁移

『对网络位置的图片应用上述规则』：当我们复制了一个网络图片（的 url ），Typora 会自动下载图片到指定路径，并将 url 变为本地文件引用 —— 网络上的图片可能随时消失，本地存储更可靠。

截图后，在 Typora 中按下 Ctrl + v，则剪贴板中的图片会自动拷贝到MarkDownImages文件夹下，并且文件名基于时间戳，不容易重复

可以看出，这种插入图片的方式非常优雅、便捷

VS Code 应该是在最近才加入类似 Typora 的功能，不过只提供了『复制图片到指定路径』的选项。

我这里的配置是插入任意文件（**/*）时，将它复制到与当前 Markdown 文件同目录下的 MarkDownImages 文件夹下（没有会自动创建）。文件名叫做 VSCodeCopied-${fileName}。${fileName}是原始文件名

或者可以直接复制以下内容到 settings.json 中：

{
        "markdown.copyFiles.destination": {
                "**/*": "./MarkDownImages/VSCodeCopied-${fileName}"
        }
}

与 Typora 类似，截图按下 Ctrl + v 即可

为什么保存的图片名要叫做 VSCodeCopied-${fileName}？因为将截图插入到 VS Code 中时，会被起名为image.png

如果有重复，就在文件名后面添加数字以示区分：

这显然不直观，并且在团队合作写文档时容易造成文件名冲突。期待 VS Code 后续的更新中能够解决这一点，并提供更多的插入图片时的选项。