figure
画像を表示させるときに使えるタグですけど、アクセシビリティとか、SEO対策とかで有効そうだったので、積極的に使っていくぞと宣言したわけです。
VS Codeにスニペットを用意して、記述の手間を減らしてみたんですけど、若干の問題が。
ソースファイルの選択ができない
画像ファイル（src=""）を指定するときにファイル選択が効かないんですよね。
通常の書式  であれば、ソースのところで./と打てば、同じフォルダー内にある画像ファイルが表示されるので、選択するだけで入力が完了します。
回避策として、プラグインの 🔗 Path Intellisense - Visual Studio Marketplace でも良かったんですけど、階層ごとにTABキーを押してあげる必要があって面倒でした。
たとえば/static/abc/012/hoge.webpだと、/staticで1度入力が確定してしまい、またTABキーを押して・・・みたいな感じで、/のところで毎回TABキーが必要。
かといって、ファイル名をコピペして貼り付けるのもなんだかな～と思っていたところ、Notion AIがおもしろい回答をくれました。
神業 レンダーフック
通常のMarkdown記法で画像を用意して、出力（Html化）するときに自動でそれをfigureタグに変換しちゃうという素晴らしい技です。
Notion AI（Gemini 2.5 Pro）の教え
究極の解決策：「良いとこ取り」をする
k-kazさんの「![]()で書きたい」という気持ちを100%肯定しつつ、figureタグのメリット（高品質なHTMLとキャプション）も両方手に入れることができる、まさに魔法のような方法です。
仕組みはこうです
書くとき: あなたは、シンプルで快適な標準のMarkdown記法![]()で画像を書きます。
出力するとき: Hugoが、サイトをビルドする瞬間に、その![]()を自動的に<figure>タグに変換してくれます。
設定は一度きり
layouts/_default/_markup/render-image.htmlというファイルを1つ作成し、以下のコードを貼り付けるだけです。
<figure>
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
{{ with .Title }}
<figcaption>{{ . | markdownify }}</figcaption>
{{ end }}
</figure>これからの書き方
この設定を一度してしまえば、今後あなたは、画像を入れたい場所にこう書くだけで良くなります。
![...] の部分は、画像のaltテキストになります。
(...) の部分は、画像のパスです。VS Codeの補完もリネームも完璧に効きます。
"..." の部分は、キャプション（figcaption）になります。
すべて解決しました。
画像ファイル名
わかりやすいように日本語で書いているものが多々ありましたが、本当はよろしくないので、この機会に英字へと変更。
とりあえず、なので、本来の英語での意味は考えずにローマ字表記で済ませたところが多数。
花 → flower とか簡単なものなら対応しましたが、金木犀 → ？（kinmokuseiで・・・）とかいう感じ。
最近はほとんど問題ないと思いますけど、閲覧環境によっては日本語が文字化けなどして、画像リンクが切れちゃう可能性も無きにしもあらず。
また、検索エンジンがファイル名も参考にしているようなので。
ローマ字だと意味ないね・・・。
ここにもやってきたfigure問題
VS Codeでは、画像ファイルの名前を変えると記事本文の画像ファイル名も連動して変更してくれます。だからリンク切れが起きないし、作業が半分に減らせるので助かります。
が、これは通常のMarkdown記法で画像を用意したところが対象。
figueのsrcで指定した画像ファイルは連動しませんので、画像ファイルと記事の両方を直す必要があります。
頑張って直しましたが、ファイル名の不一致によるリンク切れがありましたらごめんなさい。
キーバインド変更
Emacsのキーバインドをこよなく愛してきましたが、キーがバッティングしたりするので通常のキーバインドに戻しました。
名残惜しくて、プラグインは無効にしたまま待機しています。
🔗 Awesome Emacs Keymap - Visual Studio Marketplace
慣れないので、間違えてばかりです。
とくに文字移動系や、コピペあたりは頻繁に使うのでよく間違えますし、便利だったよなーと遠い目になります。
VS Codeプラグイン「Gemini Code Assist」
入れてみました。
これでCursorを使う必要性もなくなった？
また改めて記事は書きたいと思います。