Vim で Markdown に画像をペーストして展開する
私は普段基本的には Vim を使って開発を行ない、当ブログの記事も Vim で書いています。
ブログを書く際に画像を文章中に展開したい場面は少なくないですが、VSCode の拡張機能であるPaste Imageが非常に便利で、画像をコピーアンドペーストする際は VSCode を使っていました。非効率ですね。 もちろん Vim だと標準ではそのような機能はないので、プラグインを探してみましたが Paste Image のような便利さを感じるものはありませんでした。
そのため、シェルスクリプトでコマンドを作成し、クリップボードにコピーしてある画像をショートカットで展開するよう設定しました。
利用するライブラリ
クリップボードにある画像ファイルを指定ディレクトリに保存します。pngpaste という名前ですが、gif や jpeg への出力にも対応しているようですね。
Homebrew があればこのコマンド実行で OK です。
今回はペーストしたファイルを画像圧縮した状態で保存するようにしたいので、こちらを使います。
コマンドファイル
シェルスクリプトを使ったコマンドファイルの実装です。
ファイルパスを指定してコマンドを実行することも可能ですが、ファイル名のみで実行するために PATH が通っているディレクトリ配下にファイルを配置します。
echo $PATH
で設定されている PATH 環境変数が確認できます。
今回は /usr/local/bin/
に配置します。
コマンドを実行する際には、コマンドファイルの権限を変更する必要があります。
試しにコマンドで paste_image_on_vim_markdown
と打ってみると、実行できるようになっているはずです。
vimrc
最後に Vim 上でコマンドを実行できるように設定します。私は NeoVim と dein を使っているので init.vim
に設定します。
nnoremap <Leader>p <C-c>:r! paste_image_on_vim_markdown <CR>
キーマップはお好みで変えてください。私は Leader
にスペースキーを指定してあります。
試しに .md
, .mdx
ファイル上でショートカットキーを押すと、
指定のディレクトリに画像が保存され、同時に画像圧縮もされます。便利!
さいごに
これで Vim でもブログに画像を展開する際は非常にスムーズに行なえるようになりました。 普段Alfredのクリップボード機能にはかなりお世話になっているのですが、履歴の一番手前に貼りたい画像を持ってくれば過去の画像も問題なく展開できます。
実現したい機能を満たすプラグインがない場合は、自分でカスタマイズするのもありですね。 今回新しいライブラリの存在を知れたり、はじめてシェルスクリプトも触れたので勉強になったし、期待する機能も実現できてハッピーです 🙌