数学公式渲染

新建katex.js

在docs文件夹目录下新建javascripts/katex.js文件,并进行以下配置:

document$.subscribe(({ body }) => { 
  renderMathInElement(body, {
    delimiters: [
      { left: "$$",  right: "$$",  display: true },
      { left: "$",   right: "$",   display: false },
      { left: "\\(", right: "\\)", display: false },
      { left: "\\[", right: "\\]", display: true }
    ],
  })
})

配置mkdocs.yaml

启用pymdownx.arithmatex插件

markdown_extensions:
  - pymdownx.arithmatex:
      generic: true

extra_javascript:
  - javascripts/katex.js
  - https://unpkg.com/katex@0/dist/katex.min.js
  - https://unpkg.com/katex@0/dist/contrib/auto-render.min.js

extra_css:
  - https://unpkg.com/katex@0/dist/katex.min.css

注意

不要将引用的文件下载到本地,因为网页在进行请求的时候会访问域名+文件.而通过反向代理mkdocs是将docs的文件映射到域名中,而不是将整个工作目录进行映射,如果直接使用本地文件会出现无法找到文件的位置.

检测是否安装成功

# 数学公式示例

这是一个行内公式：$E = mc^2$

这是一个块级公式：

$$
\int_{a}^{b} f(x) \, dx
$$

\(E = mc^2\)

\[ \int_{a}^{b} f(x) \, dx \]