Gatsby×ブログ - .mdxでLaTeX数式を埋め込みたい（できなかった）

2022.03.23 — Gatsby — 1 min read

はじめに．
この記事を読んでもmdx内でLaTeX数式を記述できるようにはなりません．
著者が導入しようとして，失敗した記録です．

gatsby-remark-katex を導入してみる

プラグインのページを参考にやってみた．
やったこと↓

1npm install gatsby-remark-katex

gatsby-config.js

1{
2    resolve: `gatsby-plugin-mdx`,
3    options: {
4        gatsbyRemarkPlugins: [
5            {
6                resolve: `gatsby-remark-katex`,
7                options: {
8                    strict: `ignore`,
9                },
10            },
11        ],
12    },
13},

gatsby-browser.js

1import "katex/dist/katex.min.css"

関係するエラー

1warn [remark-math] Warning: please upgrade to remark 13 to use this plugin

remark-math と rehype-katex を導入してみる

2020/03/01のぽい解決策があったので試した．
やったこと↓

1npm install remark-math rehype-katex katex

gatsby-config.js

1{
2    resolve: `gatsby-plugin-mdx`,
3    options: {
4        remarkPlugins: [require(`remark-math`)],
5        rehypePlugins: [require(`rehype-katex`)],
6    },
7},

gatsby-browser.js

1//これは入れてないかもしれない
2import "katex/dist/katex.min.css"

関係するエラー

たしか，同じだったと思う．

ダウングレードしてみる

2021/12/21のぽい解決策を発見．
やったこと↓

1npm install gatsby-remark-katex
2npm install [email protected]

あとは，gatsby-remark-katex の導入と一緒．

エラー

同じ

gatsby-remark-katex の古いバージョンをインストール

ver.5.0.0以降で remark@13 へ変更している．

1npm install [email protected] --legacy-peer-deps
2npm install katex

あとは，gatsby-remark-katex の導入と一緒．

エラー？

今までのエラー（警告）文は発生しなくなった．
mdxで書いた本文をみると$や$$が消えて，<span>や<div>とclassが付いていた．
classが付いただけで，数式にはなっていない．

katex もダウングレードしてみる

これはやってない．
疲れたのと，katexの丁度いいバージョンが探しにくそうだったから．

代替案の模索

オンラインでLaTeXの数式画像を作れるので，そちらで作って記事に貼り付けようと思う．
これとかこことか

あとは，gatsby-plugin-mdx が remark@13 に対応したら，もう一度 katex を検討したい．

— Gatsby —