Automatically Copying Images When Inserting into Markdown – Using Typora and VS Code as Examples
Preface
With the widespread adoption of Markdown, the efficiency of using traditional text editors for writing appears to be low, especially when dealing with some complex syntax, such as inserting tables or images.
Typora, a well-known Markdown editor, not only features “live rendering” but also offers many convenient functions for writing Markdown. One notable feature is the automatic saving when inserting images: paste an image into a Markdown file (text file), and the image will be automatically saved to a specified path, with the reference automatically created in Markdown.
For someone like me who frequently takes Markdown notes, this feature should be a standard in the industry. However, another commonly used editor, VS Code, does not provide good support for this feature. Of course, we shouldn’t expect such a free, universal editor to cover every aspect.
Demands
For users who frequently take notes, capturing screenshots and inserting them into Markdown is a common practice. Two aspects affect the user experience in this operation: 1️⃣ screenshot tool 2️⃣ Markdown editor.
With a consistent screenshot tool, the Markdown editor is the key factor in determining the user experience. Below, I will elaborate on how three editors handle image insertion.
Traditional Text Editors
These editors are typically “notepads” that support Markdown syntax highlighting, such as Vim, Sublime, etc.
After taking a screenshot, we need to save the image locally and then manually reference the image path using Markdown syntax:
1 |  |
For convenience, screenshot software often stores images in a specific path. To separately store images related to each Markdown file, we also need to manually cut the image to the desired location. Quite cumbersome!
Typora
Configuration
Typora provides various features for inserting images, with the one I use most being ‘Copy Image to Specified Path.’
Here, ‘Insert Image’ refers to dragging an image into Typora or pasting it from the clipboard (win + v).
I choose to save it to the MarkDownImages folder in the same directory as the current Markdown file (which will be automatically created if not present). A better practice would be to choose ‘Copy Image to ./${filename}.assets folder’ for easy migration of Markdown files.
‘Apply the same rule to images on the network’: When we copy a network image (a URL), Typora will automatically download the image to the specified path and change the URL to a local file reference, as storing images locally is more reliable than relying on images on the internet, which may disappear at any time.
Operation
After taking a screenshot, press Ctrl + v in Typora, and the image from the clipboard will be automatically copied to the MarkDownImages folder, with the file name based on the timestamp and less prone to duplication.
As seen, this way of inserting images is very elegant and convenient.
VS Code
Configuration
VS Code seems to have recently added a feature similar to Typora, but it only provides the option of ‘Copy Image to Specified Path’.
My configuration here is to copy any file (**/*) inserted to the MarkDownImages folder in the same directory as the current Markdown file (which will be automatically created if not present). The file is named VSCodeCopied-${fileName}, where ${fileName} is the original file name.
Alternatively, you can copy the following content directly into settings.json:
1 | { |
Operation
Similar to Typora, press Ctrl + v after taking a screenshot.
Why is the saved image named VSCodeCopied-${fileName}? This is because when inserting a screenshot into VS Code, it is named as image.png.
If there are duplicates, a number is added to the file name to distinguish:
This is obviously not intuitive and can lead to filename conflicts when collaborating on document writing within a team. Hopefully, future updates to VS Code will address this and provide more options when inserting images.