markdown-picture-helper

Paste images into Markdown — auto-upload to your image hosting and insert the link.

📖 中文文档 | 📖 English Docs

Features

• Paste to upload: Ctrl+Alt+V (Mac: Cmd+Alt+V) uploads clipboard images instantly
• Drag & drop: drag images into Markdown files for automatic upload
• 10 providers: GitHub / Gitee / Cloudflare R2 / AWS S3 / Qiniu Kodo / Alibaba Cloud OSS / Tencent Cloud COS / Huawei Cloud OBS / Self-hosted / Local workspace
• Flexible link format: Markdown image, Markdown link, plain URL, or HTML <img> tag
• Flexible naming: timestamp / UUID / SHA-256 hash / original filename
• Configurable directory: per-provider imageDir for independent subdirectory per hosting service

Usage

After upload, ![](https://github.com/jabin-hao/markdown-picture-helper/raw/HEAD/url) is inserted at cursor position.

Quick Start

1. Install the extension
2. Configure a provider in VSCode settings (search markdownPictureHelper)
3. Open a .md file, copy an image, press Ctrl+Alt+V

GitHub Example

{
  "markdownPictureHelper.provider": "github",
  "markdownPictureHelper.github.owner": "your-username",
  "markdownPictureHelper.github.repo": "your-repo",
  "markdownPictureHelper.github.token": "ghp_xxxxxxxxxxxx",
  "markdownPictureHelper.github.branch": "main",
  "markdownPictureHelper.github.imageDir": "images"
}

Alibaba Cloud OSS Example

{
  "markdownPictureHelper.provider": "aliyun",
  "markdownPictureHelper.aliyun.endpoint": "https://oss-cn-hangzhou.aliyuncs.com",
  "markdownPictureHelper.aliyun.region": "oss-cn-hangzhou",
  "markdownPictureHelper.aliyun.accessKeyId": "LTAI5t...",
  "markdownPictureHelper.aliyun.secretAccessKey": "...",
  "markdownPictureHelper.aliyun.bucket": "my-bucket",
  "markdownPictureHelper.aliyun.publicUrl": "https://cdn.example.com",
  "markdownPictureHelper.aliyun.imageDir": "images",
  "markdownPictureHelper.aliyun.forcePathStyle": true
}

Local Workspace

{
  "markdownPictureHelper.provider": "local",
  "markdownPictureHelper.local.imageDir": "images"
}

Supported Providers

Each provider has its own imageDir config (e.g., markdownPictureHelper.github.imageDir).

Status: ✅ GitHub / Gitee / Cloudflare R2 / Qiniu Kodo — tested and stable.
🚧 AWS S3 / Alibaba Cloud OSS / Tencent Cloud COS / Huawei Cloud OBS / Self-hosted / Local — under development, may have issues.

Project Structure

.
├── extension/                  # Extension backend (Node.js)
│   ├── index.ts               # Activation & command registration
│   ├── config.ts              # Configuration types & reader
│   ├── naming.ts              # File naming strategies
│   ├── clipboard.ts           # Cross-platform clipboard reading
│   ├── paste-handler.ts       # Core paste handling (shortcut)
│   ├── paste-provider.ts      # Drag & drop paste provider
│   └── providers/             # Image hosting providers
│       ├── base.ts            # Interface + S3 base + registry
│       ├── git.ts             # GitHub + Gitee
│       ├── r2.ts              # Cloudflare R2
│       ├── s3.ts              # AWS S3 / MinIO
│       ├── qiniu.ts           # Qiniu Kodo
│       ├── aliyun.ts          # Alibaba Cloud OSS
│       ├── tencent.ts         # Tencent Cloud COS
│       ├── huawei.ts          # Huawei Cloud OBS
│       ├── custom.ts          # Self-hosted
│       └── local.ts           # Local workspace
├── docs/                      # Documentation
│   ├── images/                # Logo & images
│   ├── zh-CN/README.md       # Chinese full docs
│   └── en/README.md           # English full docs
└── cliff.toml                 # Changelog config (git-cliff)

Development

bun install
bun run dev       # Start dev server
bun run build     # Production build
bun run lint      # Lint check
bun run changelog # Generate CHANGELOG.md

Press F5 in VS Code to launch the extension development host.

Documentation

• 中文完整文档 — 包含所有图床详细配置、FAQ、开发指南
• English Full Docs — all providers, detailed config, FAQ, dev guide

License

MIT