この記事の概要
Visual Studio Codeで文章を書く中で、挿入する画像のalt文を連番にしないといけない場面がありました。
手動で変更するのは大変だったので備忘録として残します。
なお、記載しているショートカットはmacOSのものです。
当時の状況
- 画像を貼るのは普通のMarkdownの形式(

) -
alt文
は図1
、図2
と連番にするルール - 途中で図が増えた場合、後に続く
alt文
をすべてずらす必要がある
長い記事だったので画像が100枚くらいあり、手動で変更するのは嫌でした。
対応したこと
- Insert Numbersをインストールしておく
-
alt文
の中身を正規表現ですべて選択する - 不要な部分を消して、再度すべてにカーソルを合わせる
- Insert Numbersで置換する
正直簡単な内容ですが、それぞれ説明します。
Insert Numbersをインストールしておく
Insert Numbersという拡張機能があるので、インストールします。
色々なフォーマットで連番を入力できる拡張機能です。
以下の記事が丁寧に説明されていたのでリンクを貼っておきます。
alt文
の中身を正規表現ですべて選択する
状況をざっくり再現するとこうです。


 <!-- 新しく追加した画像 -->
 <!-- これより後の画像はすべて番号を変えたい -->







この状態で、置換(option + command + F)
を実行します。
正規表現モードをオンにして、Find
に!\[図.*\]
と入力し、Replace
に![図]
を入れてReplace All
(command + return
)を実行します。
(画像番号が1桁から3桁まであったので、正規表現を利用しています。)
不要な部分を消して、再度すべてにカーソルを合わせる
実行すると以下のようになります。
この状態で










Insert Numbersで置換する
command + option + n
でInsert Numbersを実行します。
デフォルトだと0始まりなので、ショートカットを押して出てきたウィンドウに%d:1:1
と入力してreturn
を押すと以下の結果が得られます。











最後に
非常に簡単な内容ではありますが、最初手作業でやろうとして挫折し、新しい拡張機能まで導入してしまいました。
今回はalt文でしたが画像パスなどでも連番を挿入する場面はありそうな気がして記事にしています。
そうしょっちゅう出くわすシチュエーションでは無いと思いますが、どなたかの役に立てば幸いです。
最後まで読んでくださってありがとうございます!
Twitterでも情報を発信しているので、良かったらフォローお願いします!
Devトークでのお話してくださる方も募集中です!