LoginSignup
18
19

More than 1 year has passed since last update.

Markdownでスクショ画像を貼り付ける (VS Code)

Last updated at Posted at 2021-09-18

githubや引き継ぎ書類などでmarkdownを利用している多くの方々が思っているであろうスクリーンショットを貼り付けたいと言う願望をあっさり叶えてくれる!!そんな機能がVSCodeにはある!!

Paste Image

VSCodeの拡張機能であるPaste Imageを利用することであっさり実現できる。
使い方はいたってかんたん。

  1. Installを行う
  2. 使いたい画像をスクリーンショットする(windows: win+shift+S, Mac: Cmd+Shift+5)
  3. MarkDown内の貼りたい場所でWindows: Ctrl+Alt+V Mac: Cmd+Alt+V
  4. 設定したフォルダに画像が保存され、そのパスへの参照が挿入される

画像のファイル名は'タイムスタンプ.png'がデフォルトになる。

おすすめPaste Imageの設定

デフォルトの設定では、MarkDownファイルがあるディレクトリにそのまま画像が保存されていく。これはあまりきれいとは言えないと個人的には感じている。そのため、保存先のディレクトリや保存時のファイル名などを変更していく。設定の変更の仕方を解説していく。まずはVSCode左下の歯車をクリックし設定を開く。
image.png

設定をひらいたあと右上にある下の画像の赤枠で囲んでいるアイコンをクリック。すると'setting.json'を開くことができる。
image.png

その中に下記の設定を追加する。

//Markdownの設定
// デフォルトのファイル名の頭にmarkdown名をつける
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_",
//保存したいディレクトリの設定。※"${currentFileDir}"はマークダウンファイルがあるディレクトリを指す
"pasteImage.path": "${currentFileDir}/img",
//pathの調整
"pasteImage.prefix":"./", 
// ペースト時にファイル名を尋ねる設定
"pasteImage.showFilePathConfirmInputBox":true,
"pasteImage.filePathConfirmInputBoxMode":"onlyName",

最後に

楽しいマークダウンライフを!!

18
19
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
19