calendar

Markdownで画像を貼り付けるVSCode拡張機能「Paste Image」

category VS Code
tag VS Code tag 拡張機能 tag Markdown
toc目次

Paste Imageとは

Paste Imageはクリップボードの画像をMarkdownに直接貼り付けすることのできるVS Codeの拡張機能です。

ダウンロードは以下から

Paste Image - Visual Studio Marketplace
Extension for Visual Studio Code - paste image from clipboard directly
marketplace.visualstudio.com marketplace.visualstudio.com

Paste Imageの導入方法

VS Codeの拡張機能ウインドウで「Paste Image」を検索し、「install」を選択すると導入できます。
Paste Image

Paste Imageの使用方法

  1. 画像をクリップボードにコピーする
  2. Markdonw内の画像を貼り付けたい位置で「Ctrl + Alt + V」を押す

上記手順で、自動的に画像ファイルが作成され、Markdown内に画像リンク（![](image.png)）が挿入されます。

Hugoに環境をあわせる

本拡張機能はHugoで記事を書く際に簡単に画像を挿入できるよう導入しました。

Hugoではstticディレクトリに配置したファイルがサーバーのルートディレクトリに配置されます。（/static/img/image.pngはhttps://{ブログのURL}/img/image.pngに配置される）

Paste Imageのデフォルトの設定では、編集ファイルと同じディレクトリに画像が作成されるため、VS Codeの設定でPaste Imageの設定を変更します。

  "pasteImage.path": "${projectRoot}/static/img",
  "pasteImage.basePath": "${projectRoot}/static",
  "pasteImage.prefix": "/"

上記設定を行うと、画像ファイルはstatic/img/配下に作成され、挿入されるリンクは![](/img/xxx.png)となります。