Skip to content
るいラボ
原神ツール

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

Gatsby1 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以降で [email protected] へ変更している.

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

あとは,gatsby-remark-katex の導入と一緒.

エラー?

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

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

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

代替案の模索

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

あとは,gatsby-plugin-mdx が [email protected] に対応したら,もう一度 katex を検討したい.

Gatsby