以前の記事で軽く紹介させてもらいましたが、コピペするだけで markdown に画像が挿入できる VS Code プラグイン Paste Image を試したいと思います。
真面目に調べたら、すでにとても多くの人が試していて、何番煎じかという感じですが。。。気にせずやっていきます。
はじめに
このブログは Windows の WSL2 上の vim で作っているので、そもそも VS Code ではなく Vim で同じことが実現できればそっちのほうがいいなと考えました。 で少し調べたところ、md-img-paste という vim プラグインがありました。
結論からいうと、テキストはクリップボード共有できたのですが、md-img-pasteを使った画像ペーストはできませんでした。できた方がいれば教えてください。
テキストのクリップボード共有はこちらを参考にご対応いただければ。ちなみに、これは僕だけかもしれませんが、DISPLAY変数を設定した状態だと vim 起動自体がとても遅く（体感3秒くらい）なりました。。。なので、結局クリップボード共有自体使うのをやめました。
設定方法
Paste Image をお持ちの VS Code に追加します。
config.jsonに以下の設定を追加します。
pasteImage.basePath
markdown上で指定する画像ファイルのパスのベースパスを指定します。ここを基準として、pasteImage.pathへの相対パスを出力する形になります。
Hugo では、.../static/ がデフォルトのstaticコンテンツ置き場として構成されています。参考 さらに、僕の場合は画像ファイルはさらにその配下に /img を作って格納するようにしていますので、markdown からは基本的に/img/xxx.pngのような形で指定するようにさせたいわけです。結局、hugo の static ファイル置き場に合わせる、が基本的なやり方になるだろうと理解しています。
pasteImage.insertPattern
ペースト時に生成される画像ファイル名を指定します。特にこだわりなければそのままでOKです。
pasteImage.path
ペースト時に生成される画像ファイルの置き場所を指定します。画像置き場やmarkdownファイル置き場の設定によって変わってくるので、こちらは個人の設定に合わせてご対応ください。
現状の僕の設定を以下に公開します。
{
"pasteImage.basePath": "${currentFileDir}/../../static/",
"pasteImage.insertPattern": "${imageSyntaxPrefix}/${imageFilePath}${imageSyntaxSuffix}",
"pasteImage.path": "${currentFileDir}/../../static/img"
}
markdown への貼り付け
Ctrl + Alt + V でペーストすると、
こんな感じで出力され、プレビューできるようになると思います。簡単すぎてやばい。
終わりに
普段はHugo実行とか git push とかそういったテキストエディタ以外の作業は全面的にWSL2でやっているので、この画像ペースト対策もできれば、vim on WSL2 でやりたかった。Macだと普通にできるようなので、マカーの優位性が明確にでてしまいました。残念。