【VS Code】マークダウンに画像をコピペで貼り付けする方法

こんにちは、現役エンジニアの inno_tech です。

マークダウン(.md)の編集で画像をコピー&ペーストする方法をお探しでしょうか？

本記事を読めば、マークダウン内に画像をコピペできるようになり、マークダウンによる資料作成スピードが爆上がりしますよ。

スクリーンショットした画像も貼り付けできるよ!

マークダウンの編集は Visual Studio Code がおすすめ

Visual Studio Code(以下、VS Code)は、標準でマークダウンの編集をサポートしており、マークダウンファイル(拡張子 .md)を開けばプレビューを表示しながら編集ができます。

今回はこのVS Codeの拡張機能を使用して、マークダウン内で画像をコピペする方法を紹介します。

なお、VS Codeのインストール方法はこちらの記事で紹介しています。

あわせて読みたい

【速習】Visual Studio Code インストール方法まとめ(Ubuntu 20.04LTS) Visual Studio Code(通称VSCode) のインストール方法をお探しでしょうか？ 本記事では、VSCodeのインストール方法を詳しくまとめています。コマンドライン、GUIの両方に...

本記事では、Windows10 または Ubuntu 20.04 で動作確認を行っています。

拡張機能 Paste Image

画像をコピー&ペーストする拡張機能として「Paste Image」 という拡張機能を使用します。これを使うと、Ctrl + Alt + Vのショートカットでクリップボード中の画像を貼り付けできます。

インストール

VS Codeを起動し、ショートカット Ctrl + Shift + xを押して拡張機能メニューを開きます。

検索ボックスからPaste Image を検索し、インストールしてください。

ターミナルからコマンドでPaste Imageをインストールすることもできます。

# コマンドでインストールする場合
code --install-extension mushan.vscode-paste-image

また、追加で xclipパッケージのインストールが必要です。ターミナルから下記のコマンドを実行してください。

# xclipのインストール
sudo apt install -y xclip

続いて、Paste Imageの設定方法を説明します。

フォルダーパスの設定

Paste Imageで画像の貼り付けをすると、画像ファイル(.png)が生成され、それをマークダウンにリンクとして挿入します。この画像ファイルを保存するフォルダーを settings.jsonファイル内で設定できます。

VSCode が起動した状態でショートカットキー Ctrl + , を実行し、VS Codeの設定画面を開きます。(GUIからの場合、ファイル > ユーザー設定(Preference) > 設定)

設定画面の右上に、settings.json を編集するボタンが表示されるのでこれをクリックします。

settings.jsonに pasteImage.pashキーを追加します。

{
    ・・・他の設定・・・,
    "pasteImage.path": "${currentFileDir}/./imgs"
}

フォルダ名は自由に設定してね！

上記の設定でPaste Imageを実行すると、マークダウンファイルと同じフォルダ階層にimgsフォルダができ、その中にpngファイルが自動保存されます。

[親フォルダ]
├── imgs
│   └── 2022-04-10-11-23-03.png
└── sample.md

続いて、実際にスクリーンショットをマークダウンにコピペして貼り付けてみます。

コピペしてみよう

Paste Imageでは、クリップボードに画像がある状態で Ctrl + Alt + Vのショートカットで画像を貼り付けできます。

スクリーンショットを撮影し、Ctrl + Alt + Vで貼り付けると、pngファイルへのリンクが自動的に挿入されます。

画像ファイルを保存する手間、リンクを入力する手間がなくなるね!

さいごに

私が厳選したVisual Studio Code のおすすめ書籍はこちら。

いかがだったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!

この記事がイイねと思ったら、Twitterフォロー か  にほんブログ村のどちらかしてくれたら嬉しいよ!