在 Vuepress 中使用 Katex

Swedish li in Toykyo

2020年08月09日

记录如何在 Vuepress 中配置 katex 的使用和 Katex 的基本使用方式

# Vuepress 中的 Katex 配置

添加 markdown-it 插件依赖

yarn add @swedish-li/markdown-it-katex

添加 katex 依赖

yarn add katex

在 config.js 中添加 @swedish-li/markdown-it-katex (opens new window) 配置

module.exports = {
  ...
  markdown: {
    extendMarkdown: md => {
      md.set({ break: true})
      md.use(require('@swedish-li/markdown-it-katex'))
    }
  }
  ...
}

1
2
3
4
5
6
7
8
9
10

在 index.styl 中导入 Katex 的样式


@import '~katex/dist/katex.min.css'

1
2
3

# 在 Markdown 中使用 Latex

单行的 Latex 在两边加上 $ 符号，多行的 Latex 需要在开头和结尾加上 $$

# 的单行 Latex 写法

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

渲染结果:

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

# 多行的 Latex 写法

$$\begin{alignedat}{5}
P &\rarr Translate &\rarr P_T \\
V &\rarr Rotate &\rarr V_T
\end{alignedat}$$

1
2
3
4

渲染结果

$\begin{alignedat}{5} P &\rarr Translate &\rarr P_T \\ V &\rarr Rotate &\rarr V_T \end{alignedat}$