Markdown Paste image ^{VS Code}

Paste an Image from clipboard into markdown for VS Code

Installation

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

ext install chris-towles.markdown-paste-image

Features

• Paste image from clipboard into markdown
• prompts for the file name or uses the selected text as the file name.
• Save clipboard image as PNG file and insert image markdown.

There are other plugins that had this feature, but they were not maintained, had bugs, or had tons of features I didn't want. So here is a simple extension that does one thing and one thing only and does it with tests!

Requirements

Linux

xclip command is required (Linux)

Example on Ubuntu

sudo apt-get update -y
sudo apt-get install xclip

Windows

powershell command be required (Win32)

Mac

pbpaste command be required (Mac)

---

Configuration

Below are the options you can set in your settings.json file.

Image Folder Path

The destination to save image file.

You can use variable ${currentFileDir} and ${projectRoot}. ${currentFileDir} will be replaced by the path of directory that contain current editing file. ${projectRoot} will be replaced by path of the project opened in vscode.

{
   // ... other settings.json
   "markdownPasteImage.imageFolderPath" : "${currentFileDir}"
}

Default Image Name

The default image file name. The value of this config will be pass to the 'format' function of Luxon library, you can read document https://moment.github.io/luxon/#/formatting?id=table-of-tokens for usage. If you have text selected, it will be used as the file name instead.

{
   // ... other settings.json
   "markdownPasteImage.defaultImageName" : "yyyyLLmm-HHmmss"
}

Image Name Prefix

The string prepended to the image file name.

{
   // ... other settings.json
   "markdownPasteImage.imageNamePrefix" : ""
}

Image Name Suffix

The string appended to the image file name.

{
   // ... other settings.json
   "markdownPasteImage.imageNameSuffix" : ""
}

Image Uri Path Prefix

The string prepended to the resolved image path. Can be used if you want to supply a custom domain to image url.

{
   // ... other settings.json
   "markdownPasteImage.imageUriPathPrefix" : ""
}

Image Uri Path Suffix

The string appended to the resolved image path. Can be used if you want to supply a custom parameters to image url.

{
   // ... other settings.json
   "markdownPasteImage.imageUriPathSuffix" : ""
}

Encode Path

The string appended to the image file name. How to encode image path before insert to editor.

Possible Values: none, urlEncode, urlEncodeSpace

{
   // ... other settings.json
   "markdownPasteImage.encodePath" : "urlEncodeSpace"
}

Insert Pattern

The pattern of string that would be pasted to text.

{
   // ... other settings.json
   "markdownPasteImage.insertPattern" : "${imageSyntaxPrefix}${imageFilePath}${imageSyntaxSuffix}"
}

Show File Path Confirm Input Box

Set to true if you want to be able to change the file path or name prior to saving the file to disk

{
   // ... other settings.json
   "markdownPasteImage.showFilePathConfirmInputBox" : true
}

File Path Confirm Input Box Mode

Set the mode of file path confirm input box

Possible Values: fullPath, onlyName

{
   // ... other settings.json
   "markdownPasteImage.filePathConfirmInputBoxMode" : "fullPath"
}

VsCode Publish

• Micrsoft Publisher UI
• VsCode API Docs

Credits

I wanted to make this plugin after issues with markdown image paste mushan.vscode-paste-image. After looking for an alternative and finding out that it looked like there were half a dozen copies and most were forks, or no longer maintained.

I decided to use Anthony Fu's repo for vscode-smart-clicks as a starting point. And then build from there to have the features that I wanted.

License

MIT License © 2022 Chris Towles