AstroではデフォルトでMarkdownをサポートしているため、src/pages下のMarkdownファイルは自動的にページに変換されます。MDXファイルはデフォルトでサポートされていませんが、@astrojs/mdxインテグレーションをインストールすることで使用可能です。

ただし、Panda CSSはスタイルをリセットするため、Markdown / MDXコンテンツに読みやすいスタイルを適用するにはRehypeプラグインなどで要素にclassNameを与える必要があります。

Astroの設定

Markdown / MDXコンテンツにスタイルを設定する方法について、ここではRehype Class NamesというRehypeプラグインを用いる方法を紹介します。

import { defineConfig } from "astro/config";
import pandacss from "@pandacss/astro";
import rehypeClassNames from "rehype-class-names";
import { rehypeClassNamesOptions } from "@cieloazul310/astro-sarkara/classes";

// https://astro.build/config
export default defineConfig({
  integrations: [pandacss()],
  markdown: {
    rehypePlugins: [[rehypeClassNames, rehypeClassNamesOptions]],
  },
});

Astro SarkaraではRehype Class Names向けのデフォルトオプションを用意しています。@cieloazul310/astro-sarkara/classesからrehypeClassNamesOptionsをインポートして、上記のように設定することでAstro SarkaraのデフォルトのMarkdownスタイルを適用することができます。