Awesome

English Readme / 简体中文说明 / 繁體中文說明

Markdown Image

An extension for conveniently inserting pictures in Markdown, which supports storing pictures in local or third-party CDN service.

❤ Sponsor me / 赞助开发者

Features

1. Copy image files or paste screenshots, Shortcut key Alt + Shift + V, or right-click menu Paste Image.
2. Automatically generate Markdown code insertion.
3. Configurable to support Imgur, Qiniu, SM.MS, Cloudflare, Cloudinary, S3, Azure Storage and other CDN service. The default is local, you need to open the folder where the Markdown file is located.
4. You can also customize the code to upload pictures.
5. Support Windows, MacOS, Linux.

Requirements

Linux users must install xclip.

Ubuntu

sudo apt install xclip

CentOS

sudo yum install epel-release.noarch
sudo yum install xclip

Notice

If you want to use in the Remote Mode, please set remote.extensionKind like this:

"remote.extensionKind": {
  "hancel.markdown-image": [
    "ui"
  ]
}

And if you want to save image in your remote workplace, you must use SFTP upload method. Local couldn't use in Remote Mode.

Extension Settings

Base Settings

• markdown-image.base.uploadMethod: Method to upload pictures. To the local or another picture CDN service.
• markdown-image.base.fileNameFormat: The filename format for upload. Not Support in Imgur and SM.MS. You can use some variables. You can find more in setting.
• markdown-image.base.codeType: The type of image code, you can set to <img> tag or markdown
• markdown-image.base.imageWidth: The maximum width of the image, if the image is greater than this width, the width is set to this value. Set to 0 means not change.
• markdown-image.base.urlEncode: Whether URL encode for the url of image.

Local Settings

• markdown-image.local.path: Picture storage directory that in the local (automatically created if it does not exist).
• markdown-image.local.referencePath: The reference path format in markdown(not include file name). Empty means use relative path. You can use variable of #markdown-image.base.fileNameFormat# in here. For example: /images/${YY}-${MM}/

GitHub Settings

• markdown-image.github.path: Picture upload directory that in the repository (automatically created if it does not exist). The repository must initialization first.
• markdown-image.github.token: GitHub person access token.
• markdown-image.github.repository: GitHub repository, for example: https://github.com/username/repository
• markdown-image.github.branch: GitHub repository branch to save.
• markdown-image.github.cdn: The github cdn address format to be used, ${username} is the username of markdown-image.github.repository, and ${repository} is the repository name. ${branch} is the value of markdown-image.github.branch. ${filepath} is the upload path in repository.
• markdown-image.github.httpProxy: Connect to Github via http proxy.

Imgur Settings

• markdown-image.imgur.clientId: The client id registered with imgur. You can registed it at here.
• markdown-image.imgur.httpProxy: Connect to Imgur via http proxy.

SM.MS Settings

• markdown-image.sm_ms.token: SM.MS API token (Options). You can register an account and then visit API Token Page to generate secret token.

Qiniu Settings

• markdown-image.qiniu.accessKey: The Access Key of account.
• markdown-image.qiniu.secretKey: The Secret Key of account.
• markdown-image.qiniu.bucket: The storage name.
• markdown-image.qiniu.domain: Bound domain name of storage.
• markdown-image.qiniu.zone: Zone of storage.

Upyun Settings

• markdown-image.upyun.bucket: Storge name of upload.
• markdown-image.upyun.domain: Domain bind with storge name.
• markdown-image.upyun.operator: Operator of upyun.
• markdown-image.upyun.password: Password of upyun operator.
• markdown-image.upyun.path: The path that img store.
• markdown-image.upyun.link: The link that connect to upyun.

Cloudinary Settings

These values can be found on your Cloudinary Dashboard

• markdown-image.cloudinary.cloudName: Your user account name.
• markdown-image.cloudinary.apiKey: API key for your account.
• markdown-image.cloudinary.apiSecret: API secret for your account.
• markdown-image.cloudinary.folder: Folder to upload the image to.

Cloudflare Settings

These values can be found on your Cloudflare dashboard

• markdown-image.cloudflare.accountId: Your account ID.
• markdown-image.cloudflare.apiToken: Cloudflare Images API token.

S3 Settings

These values can be found in your S3 service provider dashboard

• markdown-image.s3.endpoint: The endpoint for S3 API, can be obtained from bucket setting.
• markdown-image.s3.region: The region for the S3 bucket, can be obtained from bucket setting.
• markdown-image.s3.bucketName: The name of the S3 bucket to upload images to. Access to the bucket should be public.
• markdown-image.s3.accessKeyId: Your S3 API access key ID.
• markdown-image.s3.secretAccessKey: Your S3 secret access key.
• markdown-image.s3.cdn: Your S3 CDN Url. You can use variable ${bucket} ${region} ${pathname} and ${filepath}. For example: https://${bucket}.${region}.s3.amazonaws.com/${pathname}/${filepath}.

SFTP Settings

• markdown-image.sftp.host: The host of the remote server.
• markdown-image.sftp.port: The ssh port of the remote server.
• markdown-image.sftp.username: The username of the remote server.
• markdown-image.sftp.password: The password of the remote server.
• markdown-image.sftp.privateKeyPath: The private key path of the remote server.
• markdown-image.sftp.path: Picture storage directory that in the remote (automatically created if it does not exist). Notice: You can't use variable in here. You can use variable in #markdown-image.base.fileNameFormat#.
• markdown-image.sftp.referencePath: The reference path format in markdown(not include file name). Empty means use relative path. You can use variable of #markdown-image.base.fileNameFormat# in here. For example: /images/${YY}-${MM}/

Azure Storage Settings

• markdown-image.azure.authenticationMethod: The authentication method to use for the Azure Blob Storage account. The default is Passwordless. You can obtain more information from here.
• markdown-image.azure.accountName: Your Azure Blob Storage account.
• markdown-image.azure.connectionString: The connection string of the Azure Storage account.
• markdown-image.azure.container: The name of the container to upload images to.

DIY Settings

• markdown-image.DIY.path: The Code Path what you write. Your code must exports a function as async function (filePath:string, savePath:string, markdownPath:string):string. For example:

  const path = require("path");
  module.exports = async function (filePath, savePath, markdownPath) {
    // Return a picture access link
    return path.relative(path.dirname(markdownPath), filePath);
  };
  

Release Notes

1.1.43

• Fixed the issue where the path variable still had incomplete backslashes replaced.

1.1.42

• Fixed the issue where the path variable is not in Unix format when running at Microsoft Windows.

1.1.41

• Added a new setting item markdown-image.s3.config to config s3 client.
• Fixed the s3 cdn url generate wrong.

1.1.40

• Added a new setting item markdown-image.s3.cdn to set the s3 cdn url.

1.1.39

• Add Content-Type to s3 upload method.

1.1.38

• Supports Azure Blob Storage Passwordless authentication method.

1.1.37

• Add support for Azure Storage.

1.1.36

• Fixed the issue where the placeholder filename was not using the value calculated by fileNameFormat.

1.1.35

• Fixed the issue where only the first occurrence of the same variable for fileNameFormat was effective.

1.1.34

• Added a new setting item markdown-image.base.altFormat to set the placeholder for image code.

1.1.33

• Added a new setting item markdown-image.base.uploadMethods to support concurrent uploads with multiple upload methods.
• Added a new setting item markdown-image.base.fileFormat to set the file format for saving clipboard images.
• Removed the deprecated Coding image hosting service.
• Supported pasting images into unconventional editing windows.

1.1.30

• Added new setting markdown-image.github.httpProxy to settting GitHub http proxy.

1.1.29

• Fix failed to get image from clipboard on deepin.

1.1.28

• Support group setting.
• Add support for remote mode.
• Add SFTP upload method.
• Includes the following new settings:
  • markdown-image.sftp.host
  • markdown-image.sftp.port
  • markdown-image.sftp.username
  • markdown-image.sftp.password
  • markdown-image.sftp.privateKeyPath
  • markdown-image.sftp.path
  • markdown-image.sftp.referencePath

1.1.27

• Add support for S3 compatible providers.
• Includes the following new settings:
  • markdown-image.s3.endpoint
  • markdown-image.s3.region
  • markdown-image.s3.bucketName
  • markdown-image.s3.accessKeyId
  • markdown-image.s3.secretAccessKey

1.1.26

• Add support for Upyun.
• Includes the following new settings:
  • markdown-image.upyun.bucket
  • markdown-image.upyun.domain
  • markdown-image.upyun.operator
  • markdown-image.upyun.password
  • markdown-image.upyun.path
  • markdown-image.upyun.link

1.1.25

• Fixed image url of GitHub CDN encode wrong when enable markdown-image.base.urlEncode .

1.1.24

• Fixed some bug of the option markdown-image.local.referencePath.
• Fixed the alt count of image restart when restarted extension.

1.1.23

• Added new setting markdown-image.github.cdn to settting GitHub CDN Format Address.

1.1.22

• Fix upload wrong path in GitHub Mode.

1.1.21

• Fix the problem of uploading to GitHub when the file path contains Chinese.

1.1.20

• Fixed bug of the setting start with / on local.referencePath.

1.1.19

• Fixed local mode always save to disk root path.

1.1.18

• Fixed local mode can't use absolute path.

1.1.17

• Add support for Cloudflare Images.
• Includes the following new settings:
  • markdown-image.cloudflare.accountId
  • markdown-image.cloudflare.apiToken

1.1.16

• Add to support upload image to github repository.

1.1.15

• Add file format variable prompt. Makes it possible to enter a custom name through an input prompt when pasting the image.

1.1.14

• Update Coding Picbed Package to fixed upload to coding error.

1.1.13

• Added new setting markdown-image.local.referencePath to support DIY reference path in markdown file.

1.1.12

• Added to support paste image in Jupyter file.

1.1.11

• Updated Cloudinary CDN to use the markdown-image.base.fileNameFormat setting. The extension will check for existing files and will prompt to overwrite if necessary.

1.1.10

• Added support for Cloudinary CDN
• Includes the following new settings:
  • markdown-image.cloudinary.cloudName
  • markdown-image.cloudinary.apiKey
  • markdown-image.cloudinary.apiSecret
  • markdown-image.cloudinary.folder

1.1.9

• Added setting options markdown-image.base.codeType and markdown-image.base.imageWidth use to set the maximum image width.

1.1.8

• Fixed vscode caches the DIY path code, causing a question that cannot be changed immediately.

1.1.7

• Added a option to switch whether url encode.

1.1.6

• Fixed extension log level.
• Update action after replace file.

1.1.5

• Fixed Data URL Setting Description.

1.1.4

• Added upload method Data URL.
• Fixed paste multiple documents invalid.

1.1.3

• Fixed the filename format variable ${path} were uploaded to the Coding failure in the Windows.

1.1.2

• Fixed the path contains Chinese prompts cannot be found when pasting the copied picture again. 😂

1.1.1

• Fixed the path contains Chinese prompts cannot be found when pasting the copied picture.

1.1.0

• Added Beta feature, support paste rich text. (Only supports Windows)

1.0.14

• Fixed incompatibility with Windows 7.

1.0.13

• Fixed getting the path resolution error of the clipboard picture in Windows.

1.0.12

• Added file name variable ${path}: "The path of the Markdown file being edited relative to the root directory."

1.0.11

• Fix api url of sm.ms.
• Fixed the file name with spaces cannot be found in Linux.
• Added prompt without token in sm.ms.

1.0.10

• Fix the variable $mdname does not remove the extension name of md.

1.0.9

• Fixed the problem of getting wrong date and hour in filename formatting.

1.0.8

• Add mdx support.

1.0.7

• Fixed launch extension home page failed at MacOS and Linux.
• Fixed the colon of the picture address is incorrectly encode.

1.0.6

• Fixed the date variable has not consider the time zone.

1.0.5

• Fixed file name include space could not preview.
• Fixed random variable not work.

1.0.4

• Update sponsored links.

1.0.3

• Add sponsored links.

1.0.2

• Fixed replace notice bug.

1.0.1

• Update Readme.

1.0.0

• Initial release.

Others

• GitHub
• VSCode Market
• Icons made by Good Ware from www.flaticon.com

Enjoy!