vscodeでmarkdownにスクショをペーストする(Dev Container対応)

TECH

TL;DR

  • vscode拡張を入れることでmarkdownにスクショを貼り付けることができる
  • Dev Container上でやる場合、xclip の関係で多くのextensionが動作しない
    • Paste Image などは動作しない
  • markdown-image のextensionを入れて、remote.extensionKind を設定するとうまくいく
  • スクショ貼り付け → imgur アップロード → markdown形式で記述まで可能

背景

markdownで記述している時、スクショを貼りたい場合結構面倒。

  1. スクショを画像として保存
  2. 画像をどこかに格納、WEB公開
  3. markdownで画像リンク形式で記述

これをイチイチやるのは非常にしんどいので、画像をコピペするだけで済ませたい。
また、画像はproject directoryに保存せず、 imgur にアップロードしたい（リポジトリ内の画像が増えるのが嫌）
さらに、local環境は vscodeの Dev Container を使っているのでそこで動かしたい。

設定方法

extension install

extensionの markdown-image をvscodeにインストールする

picture 1

install dependencies

Dev Container で動かす Dockerfile で xclip をインストールする

Ubuntuの場合は以下

1RUN apt-get install -y xclip

vscode setting

vscodeの settings.json を開き、以下を記述

1  "remote.extensionKind": {
2    "hancel.markdown-image": ["ui"]
3  },
4  "markdown-image.base.uploadMethod": "Imgur",
5  "markdown-image.imgur.clientId": "your-imgur-cliend-id"

あらかじめimgurにsign upしておき、clientIdを取得しておき、markdown-image.imgur.clientId にセットする。

remote.extensionKind の部分は Dev Container 上で動かした時に、clipboardから画像を取得するうえで設定が必要

試す

  • Dev Container でプロジェクトを開き、.md ファイルを開く
  • スクリーンショットを取る
  • 貼り付ける
    • win Alt + Shift + V
    • mac Option + Shift + V

うまくいけば以下のように imgur にアップロードされた画像のリンクが挿入される

picture 4

目次