nuxt contentで数式を埋め込む

nuxt/content を利用すると簡単に Markdown 形式で記事を書くことができるようになります.

Markdown を HTML に自動変換してくれますが,数式を LaTeX で埋め込んだ部分はデフォルトでは変換できないのでプラグインで対応してみます.

パッケージ追加

terminal

$ yarn add remark-math rehype-mathjax

それぞれのパッケージの用途は以下の通りです.

  • remark-math: $で囲んだ部分をインライン数式,$$で囲んだ部分を数式用のHTMLタグに置換
  • rehype-mathjax: HTMLタグを数式(SVG)に変換

参考元では rehype-katex を使用していましたが,変換がうまく動かなかったので remark-mathjax を使用します.

設定ファイルの編集

export default {
    ...
    content: {
        markdown: {
            remarkPlugins: [
                'remark-math'
            ],
            rehypePlugins: [
                'rehype-mathjax'
            ]
        }
    }
    ...
}

参考