How to: Paste screenshot from clipboard into .md file (with VS Code) - without manually copying into static image folder

I joined the forum to ask this question, but I eventually found an answer and I thought this might be helpful to someone.

You know how you can paste screenshots in a discourse forum post? You can do so with VS Code as well.

Download the VS Code Extension called “Paste Image”

Doing this is not enough because Hugo will not copy screenshots that are dropped in your content folder unless you use a ‘page bundle’ file structure.

Info on page bundles - (leaf bundle = a post, a branch bundle = a category, i.e. a post that has child posts)

image

Once you have your files structured like this, you’ll be able to see your screenshot in the markdown preview (built into VS Code) as well as the rendered Hugo page!

Hope this helps you!

3 Likes