0%
January 4, 2024

Paste Image in Markdown Files from Clipboard

md

vscode

Problem

It is a built-in function in vscode to paste image from Clipboard into markdown file. However, the behaviour is like this when you simply ctrl+v:

This default behaviour has two problems:

  • Sometimes you want your directory consists of only md files.
  • images should sit inside static file directory.

Use Paste Image Plugin

  • First we install the Paste Image plugin:

  • Next in our project (blog project, documentation project, etc) we add

    // .vscode/settings.json
    {
      "pasteImage.path": "${projectRoot}/static/img",
      "pasteImage.basePath": "${projectRoot}",
      "pasteImage.forceUnixStyleSeparator": true,
      "pasteImage.prefix": "/",
      "pasteImage.insertPattern": "${imageSyntaxPrefix}/img/${imageFileName}${imageSyntaxSuffix}"
    }
  • Here pasteImage.path is your image destination (to be saved).

  • Here pasteImage.insertPattern is the path that will be inserted into your md file.

  • Now you can paste your image from clipbaord by ctrl+alt+v.

  • For example:

    "pasteImage.insertPattern": "${imageSyntaxPrefix}/assets/img/${imageFileName}${imageSyntaxSuffix}"

    produces me a link (because "pasteImage.prefix": "/"):

    ![](/assets/img/2024-01-04-02-53-59.png)

    and my project will transform this url to some public asset file path.