Markdownにペーストした画像サイズを簡単に変更できるようにする

2254 ワード
PasteImage VSCode Markdown 効率化 Markdown テキストリンク

やりたいこと

Markdownで資料作成をするとき、Pasteした画像サイズを簡単に修正できるようにしたい！
そんなときの設定方法です

（4Kディスプレイで画像キャプチャーするとムダに画像が大きくなるとかあるよね？）

使用イメージ👇

使用ツール

設定方法

Markdownのimgタグはサイズ指定に対応していません
そのため画像サイズを変更する場合は、下記のようにHTMLで指定する必要があります

Markdown
![***代替テキスト***](***画像URL***)
↓
HTML
<img src="***画像URL***" width="***サイズ***">

そこでPaste ImageのInsert Patternを下記のようにHTML記法に変更します

  • ユーザー設定 ⇒ 設定 ⇒ 拡張機能 ⇒ Paste Image Configuration ⇒ Paste Image: Insert Pattern

setting.json抜粋
"pasteImage.insertPattern": "<img src='${imageFileName}' width='100%'>"

デフォルトでwidth=100%が付与されるので、必要に応じて調整します
Preview画面での確認以外に、VSCodeのウィンドウ右下に表示されるサイズを確認し調整してもよいと思います

これでMarkdownへの画像ペーストが捗ります♪