Astro v6で、katexを使えるようにした

katexを使うと、htmlで数式が書けるようになる。$1\times2$とか$m^3$とか

$$\dfrac{1}{2}$$

とか。

astroのversion6でもkatexが使える。このブログは、astro v6で動いているので、katexを追加することにした。

ただし、version7になると、mdやmdxの処理をSätteriというエンジンに切り替えたせいで、katexの導入方法がちょっと変わるようだ。version7対応については、このblogをastro version7に切り替えるときにまた考えるとする。

packageのインストール

npm install remark-math rehype-katex katex

astro.config.mjsの変更

importの追加

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
/// 省略
  markdown: {
    /// 省略
+    remarkPlugins: [remarkMath],
+    rehypePlugins: [[rehypeKatex, { strict: true }]],
    /// 省略
    },
/// 以下省略
  }
)}

katex用のCSSを使う

layout用のastroファイルの中で、katexのCSSをimportする

import 'katex/dist/katex.min.css';

最後に

くりかえしになるが、このやり方は、astroのv6用のやり方であって、最新のv7用のやり方ではない。 astro v7では、v6まで使っていたremarkとrehypeパイプラインを非推奨にして、Sätteriをデフォルトにしたためである。unifiedを使えばよいらしいが、詳しいことは調べていない。astroをv7に更新するときに、astro v7用の数式の書き方を調べるかも知れないので、期待しないで待っていて欲しい。