URL文字列をZennのリンクカード記法にするVSCode拡張機能のご紹介
背景
先般、こちらの記事を書きました。
それまで< >でくくったりしていて不恰好だった記事上のURLリンクを、かっこよくカードにする方法はわかったのですが、
せっかくなら VSCode の拡張機能にして「右クリックして１クリックでポン！」みたいにできたら便利だなあ、と思いつきました次第です。(スニペットでもできそうだけど)
というわけで
作って公開しました！
使い方
※VSCodeへのインストール手順は割愛いたします。本記事執筆時点で、linkcardで拡張機能を検索するとすぐに見つかるかと思います。
1. コピーしたURLをリンクカード形式で貼り付ける
適当なURLをコピーします。
markdownファイル上で右クリックします。
コンテキストメニューからLinkcard style: paste URL[1]を選択します。
コピーしたURLが、リンクカード形式で貼り付きます。
2. 選択したURL文字列を変換する
リンクカード形式にしたいURL文字列をエディタ上で選択します。(素のURLはダメよ、とmarkdownlintに怒られてます)
選択箇所を右クリックし、コンテキストメニューからLinkcard style: convert selection[2]を選択します。
選択したURL文字列が、リンクカード形式に変換されます。
まとめ
以上です。
本記事では拡張機能「URL to Linkcard for Zenn markdown」の紹介にとどめ、開発の中身については別の記事で、以下のようなトピックを中心に書いてみようと思います。
- VSCode Extensionの開発、以外と簡単だった
- 多言語対応の話
- 初めて公開するまではちょっと面倒だった(手続き上のいろいろなこと)
- Github ActionsでCI/CDしてみた件
- CHANGELOGのこと
最後まで読んでいただき、ありがとうございました。リンクカード記法をかんたんに入力できる拡張機能、ぜひインストールしてお試しいただければ幸いです。
ではまた！
ちなみに
VSCode User Snippetsでもやってみました。
macの場合、メニューバーのCode -> Preferences -> Configure User Snippetsと選択し、
コマンドパレットではmarkdownのように入力してmarkdownを選択します。
たとえば、下記のようなjsonを記述してsnippetを作成します。
{
"Zenn Link Card" : {
"prefix": "linkcard",
"body": "@[card]($1)",
"description": "Zennの記事においてカッコ内にURLを記述するとリンクカード形式になります。",
}
}
貼り付けたいURLをあらかじめコピーしておきます。
エディタ上でliのように入力してコード補完(macの場合はctrl+spaceなど)をかけると、
登録したsnippetが表示されますのでenterします。
自動でリンクカードが生成され、カーソルがカッコの中に移動しますので、そのままctrl+vすれば完成です。
うん、どっちでも良いんじゃないでしょうか！
Discussion