iTranslated by AI
Introducing a VSCode Extension for Easy Image Pasting in Zenn on WSL
Introduction
Zenn articles are managed on GitHub, and you can use VSCode for writing.
However, even if you paste an image using Ctrl + V, the image will not be correctly reflected in your Zenn article as is.
To insert images according to Zenn's specifications, the paste image extension is known as a powerful tool.
However, this extension does not work properly in WSL environments.
Therefore, in this article, I will introduce the Udon extension, which can also be used in WSL.
Differences between VSCode Image Pasting and Zenn Specifications
The behavior when copying and pasting images into a .md file in VSCode is as follows:
// Image link inserted into the article (.md file)
// Images are saved in the same directory as the .md file
zenn_contents/
└── articles/
├── image.png
└── c983fc42a138cf.md
On the other hand, Zenn has a rule where images must be placed inside the zenn_contents (GitHub repository)/images/ folder.
// Images need to be saved like this
zenn_contents/
├── articles/
│ └── c983fc42a138cf.md
└── images/
└── image.png
While the paste image extension is a famous way to comply with the above specifications, it is not suitable for WSL users because it does not work in WSL environments.
The extension that solves this problem is Udon.
About the Udon Extension
By pressing Ctrl + Alt + V, it becomes possible to insert images as follows:
zenn_contents/
├── articles/
│ └── c983fc42a138cf.md
└── images/
└──c983fc42a138cf/
└── c983fc42a138cf-2025-5-16_1.webp
Please refer to the creator's article for details about the Udon extension.
In this section, I will introduce my configuration example.
Author's Environment
- Windows 11
- WSL2 (Ubuntu 22.04.3 LTS)
- VSCode x Dev Containers
zenn_contents/ // workspaceFolder
├── articles/ // Place .md files for articles
└── images/ // Place images used in .md files
The details of the Zenn writing environment using VSCode x WSL are introduced in this article.
Configuration Example
# Specify the folder to save images when copying and pasting in .md files
"udon.baseDirectories": [
["articles/*.md", "${workspaceFolder}/images/$fileBasenameNoExtension"]
],
# Specify the rules for link descriptions inserted into .md files
"udon.rule": [
["articles/*.md", ""],
["*.md", ""],
["*", "${relImage:${workspaceFolder}}"]
]
(Side Note) Are there other ways to easily copy and paste images?
After trying several methods, I found the Udon extension to be the better choice. Here, I will also introduce the other methods I actually considered.
| Method | Pros | Cons |
|---|---|---|
| VSCode built-in feature | No extension needed, official support | Path mismatch with Zenn specs, involves manual work |
| paste image extension | Common, easy | Doesn't work in WSL |
| Modifying paste image scripts | Works in WSL | Reconfiguration required upon extension updates |
| Udon extension | WSL support, easy setup | Less proven track record |
Option 1: Utilizing VSCode's built-in feature
Initially, I considered using VSCode's built-in feature for writing Zenn articles in a WSL environment.
{
"customizations": {
"vscode": {
"settings": {
"markdown.copyFiles.destination": {
"/articles/**/*": "images/articles/${documentBaseName}/"
}
}
}
}
}
However, with this configuration, when an image is pasted into a .md file, a link is created like . This results in the extra effort of manually rewriting it to Zenn's specification of .
Option 2: Installing the paste image extension
I gave up on the paste image extension because it did not work properly in the WSL environment.
Option 3: Modifying the internal script of the paste image extension
This method involves editing the extension's internal script (linux.sh) to retrieve Windows clipboard images via PowerShell from WSL.
I decided not to use this method because it requires reconfiguration every time the extension is updated, making it a less than fundamental solution.
Conclusion
I recently read this article.
The approach of rewriting image paths during Git commit was truly eye-opening and very interesting.
On the other hand, I got the impression that the Udon extension is still not very well-known.
Since it is an extension that I find extremely useful, I wrote this article to let more people know about it.
To the creator of the Udon extension: you have been a huge help. Thank you.
Discussion