発生した問題

Astro製のブログで、Markdown形式で書いた記事を公開する際、記事に埋め込んだリンクにtarget=“_blank”属性が付かない。 そのため、記事内のリンクをクリックすると同じタブ内で外部サイトに遷移してしまう。 （何なら rel=“noopener noreferrer” も設定されない。微妙だ）

対策どうしよう

Astroの公式ドキュメント に、こんな記述がある。

Astroは、MarkdownおよびMDXのためのサードパーティのremarkおよびrehypeプラグインの追加をサポートしています。

なるほど、ということはremarkかrehypeの良さげなプラグインを探してきて入れれば解決しそうだな。

rehype-external-links を入れてみる

rehype-external-linksを入れてみよう。

$ npm install rehype-external-links --save-dev

設定してみよう。astro.config.mjsに書けば良さそう。こんな感じか

import rehypeExternalLinks from "rehype-external-links";

~~~

export default defineConfig({
  site: "https://hierophant.green",
  integrations: [mdx(), sitemap(), svelte()],
  markdown: {
    rehypePlugins: [
      rehypeExternalLinks, //ここら辺に追記していく
      [
        "rehype-external-links",
        {
          target: "_blank", //target属性に_blankをつける
          rel: ["noopener", "noreferrer"], //rel属性に noopenerとnoreferrerをつける
        },
      ],
    ],
  },
});

(先人たちのブログ記事を見ると、微妙に違う書き方だったが、おそらく2024/12/29時点の最新版ではこう)

動かしてみる

とくにエラーも出てないので実行。

できてる。これで解決。

2025/01/02 追記

上記の設定だと、mdxファイルを読み込んだ際にrehypeExternalLinksが動かないことが発覚。 ということで、mdx() のところに設定を追加する。integrationsの中身がこんな感じになります。

integrations: [
  mdx({
    rehypePlugins: [
      [
        rehypeExternalLinks,
        { target: "_blank", rel: ["noopener", "noreferrer"] },
      ],
    ],
  }),
  sitemap(),
  svelte(),
],

これでmdxファイルの記事に対してもrehypeExternalLinksが適用され、リンクが新しいタブで開けるようになる。

---