最近マークダウンのレンダラをgatsby-transformer-remark
からgatsby-plugin-mdx
に変えた。
当初はどうせマークダウンで書くなら独自仕様を避けたプレーンな形式にしておけば後から簡単にObsidianに移行したりも出来るからなるべくそうしようと思ってたんだけど、よく考えたらブログ記事をObsidianに移行することって多分永遠にないよね🤔?笑
そう考えるとPlotlyのグラフとかもサクッと書いて記事に埋め込めるようになって素敵だしもういっそのことMDXにしよう、みたいな。
実行環境の制約はあれどMDX自体もポータブルなのは変わらないしね。
MDXすごいよね、最初知った時はマークダウンにJSXが直接書けるって何事!?って思って超びびったよ。笑
文章書いてる流れのままJSXコンポーネントも挟めるってマジで革命的だと思う。
万が一記事中に突然クリックカウンターを表示したくなった時だってMDXならこの通り…!!
KaTeXだけ動かない問題
レンダラの移行自体は思ったより全然手間取ることなくサクッと出来た。
gatsby-transformer-remark
をgatsby-plugin-mdx
に差し替える- これまで書いてきた
.md
も読み込むようにextensions
を['.md', '.mdx']
に指定する
- これまで書いてきた
- remarkの
plugins
に入れてたやつらをmdxのgatsbyRemarkPlugins
に引っ越す - プロパティ名変わるところ変える
allMarkdownRemarks
→allMdx
markdownRemark
→mdx
post.body
→post.html
ほぼほぼこれだけ。
ただ1点だけ、数式の表示に使っていたgatsby-remark-katex
だけはどうしてもmdxと一緒に動かすことができず。
でもちょっと調べて工夫したらいけたので備忘録がてらにメモ。
対象のバージョン
gatsby@4.9.3
gatsby-plugin-mdx@3.9.1
先に結論
gatsby-remark-katex
を使うのをやめてremark-math
とrehype-katex
を使うと上手くいく。
現時点ではremark-math
は4系, rehype-katex
は6系が最新なんだけど、ポイントは1つ古いメジャーバージョンのremark-math@3.0.1
とrehype-katex@5.0.0
を使うこと。
そうすることで依存関係の不具合が解消されて動くようになる。
ちなみに肝心のkatex
はrehype-katex
のdependencyとして一緒にくっついてくるのでgatsby-remark-katex
の時みたいに明示的にインストールしなくても大丈夫。
やり方
npm install remark-math@3.0.1 rehype-katex@5.0.0
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-mdx',
options: {
remarkPlugins: [
require('remark-math'),
],
rehypePlugins: [
require('rehype-katex'),
// オプションを渡したい時はタプル形式で
// [require('rehype-katex'), { strict: 'ignore' }],
],
}
}
]
}
import 'katex/dist/katex.min.css'
これでMDX環境でもが書ける。やったね!
もうちょっと細かい説明
gatsby-remark-katex
が動かない理由
そもそもremark系のプラグインのほとんどがgatsby-plugin-mdx
でも動作するんだからgatsby-remark-katex
もしれっと動いてほしいところだよね。
この書き方で上手くいってほしい!けど動かない😇
/* 動かないパターン */
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-mdx',
options: {
gatsbyRemarkPlugins: [
'gatsby-remark-katex',
],
}
}
]
}
原因はgatsby-plugin-mdx
で利用している@mdx-js/mdx
の1系で使われてるremarkが1つ前の12系だから。
よく見るとGatsbyのログの中でもバージョン上げないと動かないよって言ってくれてるね。
warn [remark-math] Warning: please upgrade to remark 13 to use this plugin
remark-math
というのはgatsby-remark-katex
の中で使われているモジュールなんだけど、これが4系だとremarkの方は13系以上の必要があるみたい。
だから逆にgatsby-remark-katex
を使わずに12系に対応したremark-math
のバージョンを直接使うようにすればとりあえずいけるってわけね。
@mdx-js/mdx
のissue見た感じだとv2からはremarkも13系にアップデートされてるみたいだからgatsby-plugin-mdx
が対応し次第自然に解消されるはず…なんだけど少し時間がかかるかもね。
MDX v2: ☂️ Umbrella issue #1041
ってゆーかremarkの13系以上を前提にしてるプラグインをMDX環境で使おうとすると全部同様の問題にぶつかる可能性があるってことかな?覚えておこう。
remark-math
とrehype-katex
なに
↓こういうことみたい。
remark-math
- md→html変換の際に$でくくられた部分をLaTeX表記のブロックに変換する
- 例)
$\frac{1}{N}$
→<span class="math math-inline">\frac{1}{N}</span>
rehype-katex
- 変換されたhtmlを受け取ってLaTeX表記の部分にKaTeXのスタイルを当てる
- 例)
<span class="math math-inline">\frac{1}{N}</span>
→
mdから変換したhtmlに対して色々する系の処理をremarkではrehype
って言うみたいだね。これも覚えとこ。