AstroのMarkdownに数式を書く方法


AstroのMarkdownファイルにKaTeX\KaTeXの数式を書けるようにする手順をまとめます。

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

必要なパッケージをインストールします。

$ npm install remark-math rehype-katex

Step 2: Astroのconfigファイルを編集

astro.config.mjsを編集します。

  • 必要なパッケージをインポート
import remarkMath from 'remark-math'
import rehypeKatex from 'rehype-katex'
  • defineConfigにMarkdownの項目を以下のように記載
export default defineConfig({
    //すでに書かれている部分は略
    markdown: {
        remarkPlugins: [
            remarkMath,
        ],
        rehypePlugins: [
            [rehypeKatex, {
            // Katex plugin options
            }]
        ]
    }
});

Step 3: MarkdownファイルのheadタグでKaTexのスタイルシートを読むようにする

AstroのMarkdownレイアウトファイルのheadタグにKaTeX\KaTeXスタイルシートを追加します。 形式はKaTeXのドキュメントを参照してください。 Markdownレイアウトファイルは、npm create astro@latestによるAstroブロジェクト新規作成時にブログテンプレートを選んだ場合は、src/layouts/BlogPosts.astroです。

<head>
    <!-- 以下をheadタグに追加 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.css" integrity="sha384-3UiQGuEI4TTMaFmGIZumfRPtfKQ3trwQE2JgosJxCnGmQpL/lJdjpcHkaaFwHlcI" crossorigin="anonymous">
    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/katex.min.js" integrity="sha384-G0zcxDFp5LWZtDuRMnBkk3EphCK1lhEf4UEyEM693ka574TZGwo4IWwS6QLzM/2t" crossorigin="anonymous"></script>
    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.7/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
    <!-- 以上をheadタグに追加 -->
</head>

Step 4: Markdownファイル内で数式を書く

これで、Markdownファイル内に数式を書くことができます。

$$
\begin{aligned}
I(A,B)&=\sum_{a\in A} \sum_{b\in B}p(a,b)\log\frac{p(a,b)}{p(a)p(b)}\\
&=\sum_{a\in A} \sum_{b\in B} p(a,b)\log p(a|b)-\sum_{a\in A} \sum_{b\in B} p(a,b)\log  p(a)\\
&=-H(A|B)-\sum_{a\in A}p(a)\log  p(a)\\
&=H(A)-H(A|B)
\end{aligned}
$$

これは以下のようにレンダリングされます。

I(A,B)=aAbBp(a,b)logp(a,b)p(a)p(b)=aAbBp(a,b)logp(ab)aAbBp(a,b)logp(a)=H(AB)aAp(a)logp(a)=H(A)H(AB)\begin{aligned} I(A,B)&=\sum_{a\in A} \sum_{b\in B}p(a,b)\log\frac{p(a,b)}{p(a)p(b)}\\ &=\sum_{a\in A} \sum_{b\in B} p(a,b)\log p(a|b)-\sum_{a\in A} \sum_{b\in B} p(a,b)\log p(a)\\ &=-H(A|B)-\sum_{a\in A}p(a)\log p(a)\\ &=H(A)-H(A|B) \end{aligned}