Astroでremark-link-cardをつかってリンクをカード形式で表示する

Astroのmarkdonwで書いた記事部分のHTML表示にはremarkが使われており様々なプラグインを適用することができます。

remark-link-cardもその一つで、生リンクの記載をカード形式にして表示することができるプラグインです。

GitHub - gladevise/remark-link-card

Contribute to gladevise/remark-link-card development by creating an account on GitHub.

https://github.com/gladevise/remark-link-card

対応した際の差分は下記のリンク先にありますが、実際にいま見えているようなカード形式で表示することが可能です。

linkをcard形式で表示できるようにする · futabooo/astro-blog@f3e794b

My Personal Site Powered by Astro. Contribute to futabooo/astro-blog development by creating an account on GitHub.

https://github.com/futabooo/astro-blog/commit/f3e794baa954353ff78d169710ae4a6c625df7ab

ちょっとはまったところ

記事のCSSにはtailwindcss/typographyをつかっているのですが、リンクカードのCSSと競合してしまうのを回避する方法がよく分からず時間がかかってしまいました。

結論としてはリンクカード側のCSSを適用したい部分に!importantを指定することで解決できました。

.rlc-favicon {
  margin-right: 4px;
  width: 16px;
  height: 16px;
  /* tailwind cssのprose内で使う際にmarginがproseで設定されているので無効にする */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}