HtmlのコードからHugoのShorcodeに置き換える

はじめに

前回のShortcodeの記事Shortcodeを作成したが、それを過去の記事に反映できていないので反映する。

環境

VisualStudioCode 1.85.2
ChatGPT3.5-Turbo

手順

ChatGPTにそのまま聞いてみる。

<a href="/path/to/image" data-lightbox="capture">![sample](/path/to/image)</a>  
以下に書き換えたいです。
{{ < lightbox name="sample" path="/path/to/image" > }}
正規表現で置換したいのですが、どのようにすれば実現ができますか

pythonのコードが返ってきたので、VSCode上でやりたいことを伝える。

VSCodeで正規表現を使用しての置換は簡単に行えます。VSCodeの検索と置換機能を利用して、以下の手順で行うことができます。

VSCodeを開き、対象のファイルを開いてください。

キーボードで Ctrl + H を押すか、メニューの "検索" > "置換" をクリックします。

正規表現を有効にするため、検索バーの左端の .* アイコンをクリックして、正規表現モードに切り替えます。

検索バーに次の正規表現を入力します。

<a\s+href="([^"]+)"\s+data-lightbox="([^"]+)">\s*!\[([^\]]+)\]\(([^)]+)\)\s*</a>

置換バーに次のテキストを入力します。

{{ < lightbox name="$3" path="$4" > }}

ファイル全体または選択した範囲で、"すべて置換" ボタンをクリックして変換を実行します。

これにより、対象のファイル内で <a> タグを {{ < lightbox > }} ショートコードに変換できます。

https://chat.openai.com/share/220c323b-f80f-4387-a793-e00855b42ca7

ということで、これを実践すると無事に置き換えができた。

おわりに

ChatGPTに聞いただけ。
ありがとうChatGPT、記事にする必要はあったのだろうか?

Hugo で構築されています。
テーマ StackJimmy によって設計されています。