目次

katexとは

web上で、数式を表示するためのライブラリです。
高速に表示できることが強みです。
逆に弱みとしては、latexのタイプセットと互換性がない（つまりkatex独自のタイプセット）を利用するケースがあるため、latexの数式をそのまま移行することが困難な点でしょうか。

参考：
katex
markdown-it-katex

なぜkatexを選んだか

単純に nuxtjs で動作させることができたのが、katexだったからです。
当初は、mathjaxを試していましたが上手く動作せず・・・

katexの導入及び設定方法

npm にて、 markdown-it-katex を導入するだけです。
インストールコマンド例は以下のようになります。

npm install @nuxtjs/markdownit
npm install markdown-it-katex 

設定は、 nuxt.config.js に下記のように設定します。
本設定に必要な箇所のみ抜粋しています。

export default {
  ...
  modules: [
    "@nuxtjs/markdownit",
    ...
  ],
  markdownit: {
    preset: "default",
    html: true,
    linkify: true,
    breaks: true,
    typographer: true,
    injected: true,
    use: [
      "markdown-it-katex",
      ...
    ]
  },
  plugins: [
    "~/plugins/katex",
    ...
  ],
  ...
}

今回は、 katex をプラグインとして読み込み nuxtjs全体に適用したいため、 plugins/katex.js を作成し下記の内容としました。

import katex from 'katex'
import 'katex/dist/katex.min.css'

export default katex

plugins/katex.js 内で katex.min.css を読み込むことで、 綺麗な数式を表示できます。

表示例

例えば、

a \cup b

という入力を行うと、

$a \cup b$

という感じに表示してくれます。

最後に

これまでは、数式を /\ とか書いてそれっぽく見せていましたが、これからはユーザが普段見ているような数式で表示できるようになりました。
nuxt.js における katexの設定情報が少ないなと感じていましたので、どなたかの助けになれば幸いです。
※といっても、katexの設定自体はかなりシンプルなので、だれも迷わないかもですが。。。