Zenn
⛰️

VS Codeでマークダウンに画像ペーストできるようにする方法(Zenn対応)

2021/12/01に公開
VS Code
Zenn
Markdown
Rabee
pasteimage
tech

こんにちは、初投稿です。よろしくお願いします。
Zennで記事を書く際にペーストで画像が貼り付けられないと不便だと思ったので、今回はVS Code上で画像貼り付けをするための設定を書いていきます。

前提として、GitHub連携をしている必要があります。
GitHubからの画像アップロード機能についてはZennの以下のリンクの機能を使用しています。

https://zenn.dev/zenn/articles/deploy-github-images

拡張機能 Paste Image をいれる

拡張機能 Paste Image をインストールします。
Paste Image

設定を変更

インストールが終わったら、設定を変えていきます。

この記事では ユーザー設定 を変更していますが、ワークスペースごとに設定したほうが良いとおもいます。
気になる方は、ワークスペースで設定してください。

settings.json を編集

ワークスペースの settings.json を直接編集する場合は、こちらの設定を貼り付ければ完了です。
わからない方やユーザー設定を変更する方は、飛ばして GUIから設定 を読んでください。

settings.json
{
  "pasteImage.basePath": "${currentFileDir}/..",
  "pasteImage.insertPattern": "${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix}",
  "pasteImage.path": "${currentFileDir}/../images"
}

GUIから設定

settings.json で設定した方はこちらの設定は不要です。

  1. Paste Image: Base Path を ${currentFileDir}/.. にします。
  2. Paste Image: Path を ${currentFileDir}/../images にします。(paste image destination path と入力すると一番上に出てきます。)
  3. Paste Image: Insert Pattern を ${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix} にします。 (${imageSyntaxPrefix} と ${imageFilePath} の間に / を入れてください。)

以上で設定は終了です。

ローカルでCLIのプレビュー機能で確認できます。
問題なく表示されていれば、画像ファイルと記事をGitHubにpushして記事を公開すれば、貼り付けた画像が表示されていると思います。

貼り付け方

  • Windows は Ctrl+Alt+V
  • Mac では ⌘+⌥+V

で貼り付けられます。

参考記事

https://tonari-it.com/vscode-markdown-paste-image-charactercount/

Discussion