MDX 中のリンクを別タブで開く

技術記事とかを読んでいると参考リンクが気になること、ありますよね。 「おっ、こっちの記事もよさそう」となったときにリンクをクリックすると元々記事を見ていたタブでリンクを開いてしまい、ため息をつきながら元のページに戻って、右クリックして新規タブを開く……みたいなことをしている人は多いのではないでしょうか。僕は毎日やっています。

サイト内のリンクであれば全然問題ないのですが、別サイトに飛ぶときに同じタブで開かれるのは許せません。

そんなことを思っているくせに、このブログでも記事中のリンクをクリックすると元々のタブでリンクを開いてしまっていたダブスタ人間が僕です。 しかし、ついに別タブで開けるようになりました。

やり方

Astro のこちらのページに書かれていますが、カスタムコンポーネントを目的のタグに割り当てればいいだけです。 今回の場合はとりあえず以下のようなコンポーネントを作成します。

---
interface Props {
  href: string;
}

const { href } = Astro.props;
---

<a href={href} target="_blank" rel="noopener noreferrer">
    <slot />
</a>

このコンポーネントを mdx ファイルにインポートしてaタグに割り当てます。 コンポーネント名やファイルパスは適当なので自分の場合に置き換えてください。

---
---

import Anchor from "./Anchor.astro";
export const components = { a: Anchor };

// このファイル中のリンクは別タブで開かれる

これでリンクを別タブで開くのは実現できました。

僕の場合は自分のブログ内のリンクは同じタブで開きたかったので、コンポーネントファイルで以下のように条件分岐させています。

---
interface Props {
  href: string;
}

const { href } = Astro.props;
---

{
  href.startsWith("https://kamewalk.com") ? (
    <a href={href}>
      <slot />
    </a>
  ) : (
    <a href={href} target="_blank" rel="noopener noreferrer">
      <slot />
    </a>
  )
}

かなり雑な感じもしますが、動くのでヨシとしましょう。

• ブログ内リンク
• ブログ外リンク

こんな感じでちゃんと機能していますね。

まとめ

要はカスタムコンポーネントを作って、mdx ファイルにインポートしてやればよいです。 新しく記事を書く度にカスタムコンポーネントをインポートする手間はありますが、そのくらいは仕方ないですよね。 jsx ぽく書くほうが個人的には手間だったので、マークダウンの書き味を保ったままリンクを別タブで開けるのは嬉しいです。

今回はaタグに絞って紹介しましたが、他のタグのカスタマイズもできるのでそのうちやってみたいです。 また、mdx であれば Astro ではなく react とかでも同じことはできるはずなので、Astro 使ってない方もやってみてください。

この世から外部サイトを同じタブで開くサイトが１つでも減ることを願っています。

リンク

• MarkdownとMDX | Docs
• Components | MDX