VuePress で markdown-it-katex

VuePress では Markdown のレンダリングに markdown-it が使われているので、そのプラグイン markdown-it-katex を使う。

インストールと設定

yarn add --dev markdown-it-katex

docs/.vuepress/config.js

module.exports = {
  markdown: {
    config: md => {
      md.use(require('markdown-it-katex'))
    }
  }
}

1
2
3
4
5
6
7

すべてのページに適用する場合は、config.js に書く。また、数式の表示が崩れていたので、katex の CSS のバージョンを下げている。

docs/.vuepress/config.js

module.exports = {
  head: [['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/katex@0.6.0/dist/katex.min.css' }]]
}

1
2
3

$x^{n}+y^n=z^n$

$$
x^{n}+y^n=z^n
$$

1
2
3