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 にこれを追加すれば、実現できるはずではあるが、そのままやると正しく動かなかったので、そのメモ。

結論

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

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

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

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

Q&A 方式


Tags: katexnuxt

関連記事

About

エンジニアです。 仕事では Xincere Residence を作っています。 このサイトは個人のブログであり、所属団体の意見等とは関係がありません。

Tags