AstroでのMarkdown処理とプラグイン

作成日:
Astro Markdown rehype remark frontend

Astroでは、Markdownファイルを処理する際にremarkやrehypeプラグインを使用して、コンテンツを変換・拡張できます。これにより、リンクの自動変換、コードハイライト、目次の自動生成など、様々な機能を追加できます。

remarkとrehypeとは

AstroはMarkdownを処理する際、以下のパイプラインを使用します：

  1. remark: Markdown（テキスト）を処理するプラグインエコシステム
  2. rehype: HTML（AST）を処理するプラグインエコシステム
Markdown → remark → HTML AST → rehype → 最終HTML

remarkプラグインの例

  • remark-gfm: GitHub Flavored Markdownのサポート
  • remark-toc: 目次の自動生成
  • remark-math: 数式のサポート

rehypeプラグインの例

  • rehype-external-links: 外部リンクにtarget="_blank"を追加
  • rehype-autolink-headings: 見出しに自動リンクを追加
  • rehype-slug: 見出しにIDを自動付与

プラグインの設定方法

Markdown用の設定

astro.config.mjsのmarkdownセクションで設定します：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import rehypeExternalLinks from 'rehype-external-links';

export default defineConfig({
  markdown: {
    remarkPlugins: [
      // remarkプラグインをここに追加
    ],
    rehypePlugins: [
      // rehypeプラグインをここに追加
      [
        rehypeExternalLinks,
        {
          target: '_blank',
          rel: ['noopener', 'noreferrer'],
        },
      ],
    ],
  },
});

MDX用の設定

MDXファイルにも同じプラグインを適用する場合は、mdx()インテグレーションの設定に追加します：

// astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import rehypeExternalLinks from 'rehype-external-links';

export default defineConfig({
  integrations: [
    mdx({
      rehypePlugins: [
        [
          rehypeExternalLinks,
          {
            target: '_blank',
            rel: ['noopener', 'noreferrer'],
          },
        ],
      ],
    }),
  ],
  markdown: {
    rehypePlugins: [
      [
        rehypeExternalLinks,
        {
          target: '_blank',
          rel: ['noopener', 'noreferrer'],
        },
      ],
    ],
  },
});

実用例: 外部リンクを別タブで開く

目的

外部サイトへのリンクをクリックした際に、現在のページから離脱しないように、外部リンクを自動的に別タブで開く設定を追加します。また、セキュリティのためrel="noopener noreferrer"も設定します。

実装手順

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

npm install rehype-external-links

2. astro.config.mjsの設定

// astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import tailwind from '@astrojs/tailwind';
import rehypeExternalLinks from 'rehype-external-links';

export default defineConfig({
  site: 'https://knowledge.newtralize.com',
  base: '/',
  integrations: [
    mdx({
      rehypePlugins: [
        [
          rehypeExternalLinks,
          {
            target: '_blank',
            rel: ['noopener', 'noreferrer'],
          },
        ],
      ],
    }),
    tailwind(),
  ],
  markdown: {
    rehypePlugins: [
      [
        rehypeExternalLinks,
        {
          target: '_blank',
          rel: ['noopener', 'noreferrer'],
        },
      ],
    ],
  },
});

動作

この設定により、Markdownファイル内のすべての外部リンク（http://、https://で始まる）に自動的に以下が追加されます：

  • target="_blank": 別タブで開く
  • rel="noopener noreferrer": セキュリティ対策

例:

[Astro公式ドキュメント](https://docs.astro.build/)

上記のMarkdownは、以下のHTMLに変換されます：

<a href="https://docs.astro.build/" target="_blank" rel="noopener noreferrer">
  Astro公式ドキュメント
</a>

内部リンクへの影響

内部リンク（/topics/...など）には影響しません。外部リンクのみが自動的に変換されます。

その他の便利なプラグイン

見出しに自動的にアンカーリンクを追加します。

npm install rehype-autolink-headings rehype-slug
import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';

export default defineConfig({
  markdown: {
    rehypePlugins: [
      rehypeSlug,  // 先にIDを付与
      [
        rehypeAutolinkHeadings,
        {
          behavior: 'wrap',
        },
      ],
    ],
  },
});

remark-gfm

GitHub Flavored Markdownの機能（表、取り消し線、タスクリストなど）を有効にします。

npm install remark-gfm
import remarkGfm from 'remark-gfm';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkGfm],
  },
});

remark-toc

目次を自動生成します。

npm install remark-toc
import remarkToc from 'remark-toc';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkToc],
  },
});

プラグインの探し方

公式ドキュメント

npmで検索

# remarkプラグインを検索
npm search remark-

# rehypeプラグインを検索
npm search rehype-

注意点

プラグインの実行順序

プラグインは配列の順序で実行されます。依存関係がある場合は順序に注意してください。

例：rehype-slug（ID付与）→ rehype-autolink-headings（リンク追加）の順序が正しい

パフォーマンス

プラグインはビルド時に実行されるため、ビルド時間に影響します。必要最小限のプラグインを使用することを推奨します。

MDXとMarkdownの設定

MDXファイルとMarkdownファイルで異なる設定を適用したい場合は、それぞれの設定セクションで個別に設定できます。

参考