Zennのリンクカード記法を知らなかった件

結論

URLをリンクカードにするにはこう書けばOKです。

@[card](https://zenn.dev/zenn/articles/markdown-guide#%E3%83%AA%E3%83%B3%E3%82%AF%E3%82%AB%E3%83%BC%E3%83%89)

知らんかった.....知らんかったんです....orz

背景

時間は数ヶ月前にさかのぼります。

先般、下記の記事のとおり、自分のZenn執筆環境をGithubリポジトリ連携しました。

それまではふつうにWebエディターを使っていました。

記事にURLリンクを貼る際には何も考えずURLをCtrl+vでベタッと貼るだけでリンクカードになってくれまして、
「おお...これがフロントエンドのテクノロジーの進化ってやつか....」などとひどく感銘を受けたものです。

リンクカードにならない

で、Github連携しましたらVSCode環境で記事を書くようになりまして、markdown-lint系の拡張機能を使っていると、

このように、素のままのURLを記述していると怒られます。
「なるほどなるほど、URLはなんか囲ったり表示名を付けたりしないといかんのだったな」と気づいたので、そのようにします。

これでmarkdownには怒られなくなりました。記事上では下のように表示されます。

あれ、リンクカードは....？

煩悶

「素のままのURLを貼るとmarkdownに怒られるし、かと言って記法どおりに書くとリンクカードにならないし...うーんちょっとカッコ悪いけど、そういうものなのかのう...」
などと自分の知見不足を棚に上げて悩みもだえること数ヶ月。

ふと思い立ってZennのmarkdown記法をおさらいしてみようと思い、つらつらとドキュメントを眺めていたら下記の記述を見つけました。

URL だけが貼り付けられた行があると、その部分がカードとして表示されます。
また@[card](URL)という書き方でカード型のリンクを貼ることもできます。

なん、だと.....！？

まとめ

取扱説明書はよく読みましょう！(違)

自分のようにリンクカードにすることを放棄していた方、はいないにしても、諦めてmarkdownに素のままのURLを記述していた方(もいないかも)たちの一助になれば幸いです。

みなさんも、楽しいZennライフを！

ではまた！