Nuxt Content で KaTeX を利用する方法

Published: 2021/11/29


問題

nuxt content は、その markdown 形式のコンテンツの処理に、

  1. remark-parse の実行
  2. remarkPlugins の適用
  3. remark-rehype の適用
  4. rehypePlugins の適用
  5. json で書き出し

をそのおおまかな処理としている。

KaTeX は remark で処理できるので、当然、 markdown の数式を表示させたい時には、 remarkPlugins と rehypePlugins にこれを追加すれば、実現できるはずではあるが、そのままやると正しく動かなかったので、そのメモ。

結論

https://github.com/nuxt/content/issues/949

上記のスレッドにある通り、今 unified ではその API の形式の非互換アップデートの最中であり、 nuxt/content においては、古いほうを利用しないといけない、とのこと。

具体的には、 remark-math においては 4 系を、 rehype-katex においては 5 系をインストールした後、

  content: {
    markdown: {
      remarkPlugins: ['remark-math'],
      rehypePlugins: ['rehype-katex']
    }
  },

上記のように各プラグインの所にそれぞれを設定すれば、問題なく KaTeX が利用できることを確認した。

Q&A 方式

Question

@nuxt/content で KaTeX を利用する方法は?

Answer

2021/11/29 現在、最新版の remark-math と rehype-katex に nuxt は対応していないので、 remark-math は 4 系を、 rehype-katex は 5 系を使うことで、これが達成できます。


Tags: katexnuxt
Next: puma のリスタートディレクトリに関する仕様
Prev: Bootstrap はモバイルを最初に実装すると効率が良さそう。