【vim】Markdownの画像表現（![]()）をimgタグに一発置換
Summary
vimを使って置換
横幅50%にする場合
:%s/\!\[.*\]\((.*)\)/<img src="\1" width="50%"\/>/g
例えば、こういうmarkdownの場合、
このように置換される
<img src="hoge.png" width="50%"/>
Reference
ChatGPTが教えてくれた
入出力
Input
次のようなmarkdownの表記を、vimを使って<img>タグを使った表記に置換したいです。横幅は50%にしたいです。
また、このような表記がmarkdown中に多数あるため、正規表現等を使って一括置換したいです。
Output
Vimでは:sコマンドを使って正規表現による一括置換が可能です。まず以下のコマンドを使用します：
:%s/\!\[.*\](\(.*\))/\<img src="\1" width="50%"\/>/g
このコマンドの説明は以下の通りです：
-
:%s：このコマンドはVimのすべての行に対する置換を開始します。 -
\!\[.*\](\(.*\))：これがマッチさせるパターンです。具体的には、\!\[.*\](\(.*\))は<img src="\1" width="50%"/>という箇所が後方参照の対象になります。 -
\<img src="\1" width="50%"\/>：これが置換後の文字列です。\1は後方参照の1つ目（この場合は唯一の後方参照）を参照します。 -
/g：このフラグは、各行で複数回マッチする場合に全てのマッチに対して置換を行います。
これで、指定されたパターンの全てが<img src="..." width="50%" />形式に置換されるはずです。
ただし、このコマンドはMarkdownの画像リンクがという形式になっていることを前提としています。形式が異なる場合、正規表現を適切に調整する必要があります。
Input
ありがとうございます。その表現を実行すると<img src="(/attachment/646b0562b23d6f03a16b9c27)" width="50%"/>となりますが、srcの中が括弧で囲われているためmarkdownで正しくプレビューされません。括弧を取り除いた状態で置換したいです。
Output
申し訳ありません、その点を見落としていました。括弧を取り除くために、以下のようにコマンドを変更します：
:%s/\!\[.*\]\((.*)\)/<img src="\1" width="50%"\/>/g
このコマンドでは、()の中にある文字列が後方参照としてキャプチャされます。そのため、置換時には括弧が含まれなくなります。これでmarkdownで正しくプレビューされるはずです。
Behind
markdownに表示する画像の幅を変えたかったのでメモ
ブラウザの拡張機能で使えるかと思いこちらを使ってみたが、GROWIではうまく動かなかった
（Githubなど限られたサイトで動きそうではある）
GROWIでもKeymapをvimに変更できるので、この方法も使えるかと期待したが、後方参照がうまくできなくて残念な結果になった
Discussion