Dark

Nuxt.js製サイトにKaTeX(markdown-it-katex)で数式表示

はじめに

Nuxt.jsを静的ジェネレータとして使うなら、MathJaxよりKaTexを使いたいです。なぜなら、MathJaxはCDNでしか使えないのに対し、KaTeXにはAPIが揃っていてページ生成時に数式を変換できるからです。

やり方

markdown-itでmarkdownをhtmlに変換することを前提とします。数式の変換にはwaylonflinn/markdown-it-katexを使います。

$ yarn add markdown-it-katex

使い方は、markdown-itの設定に以下の追加部分を追記するだけです。~/node_modules/katex/dist/katex.min.cssはmarkdown-it-katexインストール時に一緒に入ります。

import MarkdownIt from 'markdown-it'
import markdownItKatex from 'markdown-it-katex' // 追加
import "~/node_modules/katex/dist/katex.min.css" // 追加

export default ({ app }, inject) => {
  const md = new MarkdownIt({
    injected: true,
    breaks: true,
    html: true,
    linkify: true,
    typography: true,
    use: [
      "markdown-it-katex", // 追加
    ]
  })

  md.use(markdownItKatex) // 追加
  inject('md', md)
}

$md.render()でhtmlに変換できます。数式も変換されるようになっています。

<div v-html="$md.render(post.fields.body)"></div>

数式

markdownでKaTeXのinline数式を書く際は$で囲みます。以下、数式の例(waylonflinn/markdown-it-katexのREADMEより)です。

$\sqrt{3x-1}+(1+x)^2$

3x1+(1+x)2\sqrt{3x-1}+(1+x)^2

複数行の数式も書けます。

$$\begin{array}{c}

\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} &
= \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\

\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\

\nabla \cdot \vec{\mathbf{B}} & = 0

\end{array}$$

×B1cEt=4πcjE=4πρ×E+1cBt=0B=0\begin{array}{c} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{array}

MathJaxとの比較

KaTeX and MathJax Comparison DemoでKaTeX, MathJax2.7, MathJax3の処理速度を比較できることを教えてもらいました。

自分が試したときは、MathJax3、KaTeX、MathJax2.7の順ではやかったです。確かめてみてください。とはいえ、MathJaxはCDNでしか使えないので、KaTeXを使うことにしました。(このブログでは元々MathJax3を使ってたんですけどね。静的ジェネレータの利点を最大限活かそうとするとKaTeXが良いと思います。)

一方、CDNで使うならMathJax3一択かなという気がしています。数式を書くのも楽ですし。

ハマりどころ

MathJaxとKaTeXでは微妙に数式の書き方が違います。KaTeXのせいなのか他のライブラリのせいなのかわかりませんが、以下は数式を書いていてハマったところです。

  • $ a^2 $みたいに空白を入れると数式に変換されない(ので、$a^2$のようにスペースを入れないで書く
  • \tag{}が動かないので数式に番号をふれない
  • \pmod{p}が動かない
  • 数式に日本語を書けない

あと、katexのバージョンによってレイアウトが崩れるバグに会いました。

これはmarkdown-it-katexをインストールした時に自動で入るkatex@0.6.0を使わずに、自分で入れたkatex@0.11.1を使っていたのが原因でした。

おわり

おわりです。静的ジェネレータを使っているならKaTeXでページを事前生成して爆速体験をしましょう。MathJaxで書いた数式をKaTeX用に書き換えるのは地味に面倒なので、早いうちに導入しましょう。

Share:
記事一覧
Dark