AstroでMarkdown内の外部リンクを新しいタブで開く方法

Astroを使ってMarkdownファイル内の外部リンクを新しいタブで開く方法について解説します。

手順

1. 必要なパッケージのインストール

   まず、rehype-external-linksをインストールします。ターミナルで以下のコマンドを実行してください。

   npm install rehype-external-links
   

2. Astroの設定ファイルを更新

   次に、astro.config.mjs（またはastro.config.js）ファイルを開き、Markdown設定にrehype-external-linksを追加します。以下のコードを参考にしてください。

   // @ts-check
   import { defineConfig } from 'astro/config';
   import rehypeExternalLinks from 'rehype-external-links';
   
   // https://astro.build/config
   export default defineConfig({
     markdown: {
       rehypePlugins: [
         [
           rehypeExternalLinks,
           {
             target: '_blank', // 外部リンクを新しいタブで開く
             rel: ['noopener', 'noreferrer'], // セキュリティ対策
             content: { type: 'text', value: ' 🔗' }, // 外部リンクアイコン（オプション）
           },
         ],
       ],
     },
   });
   

3. Markdownファイルの作成

   これでMarkdown内の外部リンクは新しいタブで開かれるようになります。以下のようにMarkdownファイル内でリンクを追加します。

   [外部サイト](https://example.com)
   

これで、Astroを使ってMarkdown内の外部リンクを新しいタブで開く設定ができました。ぜひ活用してみてください！