Markdown Image

March 6, 2026 · View on GitHub

English Readme / 简体中文说明 / 繁體中文說明 / 日本語説明

Markdown Image

一個用於方便的在 Markdown 中插入圖片的擴展，支持將圖片存放在本地或第三方的圖床或對象存儲。

❤ Sponsor me / 贊助開發者

功能

  1. 可複製圖片文件或截圖粘貼，快捷键 Alt + Shift + V，或右键菜单 粘贴图片。
  2. 自動生成 Markdown 代碼插入。
  3. 可配置支持 Imgur，七牛，S.EE，Coding 等圖床。默認為本地，需打開 Markdown 文件所在文件夾。
  4. 也可以自定義代碼實現圖片上傳。
  5. 支援 Windows，MacOS，Linux。

依赖要求

Windows 和 MacOS 用戶可直接使用，Linux 用戶須安裝 xclip.

Ubuntu

sudo apt install xclip

CentOS

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

注意事項

如果你要在 Remote 模式中使用，請設置 remote.extensionKind 如下：

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

而且，如果要將圖像保存在遠程工作目录中，則必須使用 SFTP 上傳方法，Local 方法無法在 Remote 模式中使用。

擴展設置項目

基本設置項目

  • markdown-image.base.uploadMethod: 上傳圖片的方式，根據不同的方式，須在設置不同的項目。
  • markdown-image.base.uploadMethods: 平行上傳的上傳方法。 此處設置的上傳方法的上傳結果，將不會被插入到 Markdown 文件中。
  • markdown-image.base.fileNameFormat: 圖片文件命名格式化字符串。支持多種變量做格式化，可同時配置文件夾格式，具體見設置。
  • markdown-image.base.codeType: 插入代碼的類型， 你可以設置為使用 <img> 標籤或 Markdown。
  • markdown-image.base.codeFormat: 插入代碼的格式代碼，當 markdown-image.base.codeType 設置為 DIY 時生效。
  • markdown-image.base.imageWidth: 圖片的最大寬度，若圖片大於這個寬度，則會設置寬度為該值。設置為 0 則表示不設置。
  • markdown-image.base.urlEncode: 是否對圖像的 URL 編碼。

Local 設置項目

  • markdown-image.local.path: 圖片本地存放路徑，支持相對路徑，相對於所粘貼的 Markdown 文件。 / 表示打開的文件夾根目錄。若路徑不存在，將會自動創建。
  • markdown-image.local.referencePath: Markdown 中的圖片的引用路徑格式（不包含文件名）。留空表示使用相對路徑。你可以使用 #markdown-image.base.fileNameFormat# 中的所有變量。例如：/images/${YY}-${MM}/

GitHub 設置項目

  • markdown-image.github.path: 倉庫中的圖片保存目錄（如果不存在，則自動創建）。
  • markdown-image.github.token: Git Hub 的個人[訪問令牌](https://github. com/settings/tokens)，用於訪問倉庫，上傳圖片。
  • markdown-image.github.repository: 所要上傳的目的倉庫，比如：https://github.com/username/repository/。倉庫必須要先初始化。
  • markdown-image.github.branch: 要存放圖片的倉庫分支。
  • markdown-image.github.cdn: 要使用的 CDN 地址格式，${username} 表示上傳倉庫的用戶名，${repository} 表示上傳的倉庫，${branch} 表示上傳的分支，${filepath} 表示上傳的倉庫目錄與文件名。
  • markdown-image.github.httpProxy : 設置訪問Github的 HTTP 代理。

Imgur 設置項目

  • markdown-image.imgur.clientId: 在 imgur 註冊的 Client Id。您可以在這裡註冊。
  • markdown-image.imgur.httpProxy: 設置訪問的 HTTP 代理。

S.EE 設置項目

  • markdown-image.s_ee.token: S.EE Secret Token。您可以註冊一個帳戶，然後訪問 API Access 頁面生成。

七牛設置項目

  • markdown-image.qiniu.accessKey: 七牛賬戶的 Access Key。
  • markdown-image.qiniu.secretKey: 七牛賬戶的 Secret Key。
  • markdown-image.qiniu.bucket: 七牛的對象存儲空間名。
  • markdown-image.qiniu.domain: 七牛空间绑定的域名。
  • markdown-image.qiniu.zone: 七牛空間的存儲區域。

又拍雲設置項目

  • markdown-image.upyun.bucket: 又拍雲的雲存儲服務名稱。
  • markdown-image.upyun.domain: 又拍雲雲存儲服務綁定的域名。
  • markdown-image.upyun.operator: 又拍雲的操作員名。
  • markdown-image.upyun.password: 又拍雲的操作員密碼。
  • markdown-image.upyun.path: 又拍雲圖片存儲路徑。
  • markdown-image.upyun.link: 又拍雲鏈接線路。

Cloudinary 設置項目

這些值可以在 Cloudinary Dashboard 上找到

  • markdown-image.cloudinary.cloudName: 你的帳戶名稱。
  • markdown-image.cloudinary.apiKey: 你的帳戶 API key。
  • markdown-image.cloudinary.apiSecret: 你的帳戶 API secret。
  • markdown-image.cloudinary.folder: 圖像上傳文件夾。

Cloudflare 設置項目

這些值可以在 CloudFlare Dashboard 上找到

  • markdown-image.cloudflare.accountId: 你的帳戶名稱。
  • markdown-image.cloudflare.apiToken: Cloudflare API 令牌.

S3 設置項目

這些值可以在 S3 服務 Dashboard 上找到

  • markdown-image.s3.endpoint: 你的 S3 API 端點，是從存儲桶設置或 dashboard 獲得的。
  • markdown-image.s3.region: 你的 S3 存儲桶區域，是從存儲桶設置中獲得的。
  • markdown-image.s3.bucketName: 你的 S3 存儲桶名稱。存儲桶訪問權限應該是公開的。
  • markdown-image.s3.accessKeyId: 你的 S3 access key ID。
  • markdown-image.s3.secretAccessKey: 你的 S3 secret access key。
  • markdown-image.s3.cdn: 設定你的 S3 CDN URL。你可以使用變數 ${bucket} ${region} ${pathname} and ${filepath}。比如：https://${bucket}.${region}.s3.amazonaws.com/${pathname}/${filepath}。

SFTP 設置項目

  • markdown-image.sftp.host: 遠端伺服器地址。
  • markdown-image.sftp.port: SSH 服務端口。
  • markdown-image.sftp.username: 遠端賬戶。
  • markdown-image.sftp.password: SSH 密碼。
  • markdown-image.sftp.privateKeyPath: 遠端私鑰文件路徑。
  • markdown-image.sftp.path: 遠端伺服器的圖片存儲目錄（如果不存在，則自動創建）。支持相對路徑，相對於所粘貼的 Markdown 文件。 / 表示打開的文件夾根目錄。注意：您不能在此處使用變量。您可以在 #markdown-image.base.fileNameFormat# 中使用變量。
  • markdown-image.sftp.referencePath: Markdown 中的圖片的引用路徑格式（不包含文件名）。留空表示使用相對路徑。你可以使用 #markdown-image.base.fileNameFormat# 中的所有變量。例如：/images/${YY}-${MM}/

Azure Storage 設置項目

  • markdown-image.azure.authenticationMethod: 用於 Azure Blob 存儲帳戶的身份驗證方法。 默認值為 Passwordless。 您可以從這裡獲取更多信息。
  • markdown-image.azure.accountName: 你的 Azure Blob 存儲帳戶名。
  • markdown-image.azure.connectionString: 你的 Azure 存儲連接字符串。
  • markdown-image.azure.container: 你的 Azure 存儲容器名稱。

自定義設置項目

  • markdown-image.DIY.path: 你寫的代碼的路徑。你的代碼必須 exports 一個像 async function (filePath:string, savePath:string, markdownPath:string):string 的函數。 比如：

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

其他

Enjoy!