KaTeX

在 HTML 中渲染 TeX 数学公式

配置参数

extensions string[]

The list of extensions this plugin applies to

Default:
[ ".html" ]
cssSelector string

The css selector to apply katex

Default:
".language-math"
options object

Documentation for katex options:

See https://katex.org/docs/autorender.html

delimiters object[] undefined
Default:
[
  { left: "$$", right: "$$", display: true },
  { left: "\\(", right: "\\)", display: false },
  {
    left: "\\begin{equation}",
    right: "\\end{equation}",
    display: true
  },
  { left: "\\begin{align}", right: "\\end{align}", display: true },
  { left: "\\begin{alignat}", right: "\\end{alignat}", display: true },
  { left: "\\begin{gather}", right: "\\end{gather}", display: true },
  { left: "\\begin{CD}", right: "\\end{CD}", display: true },
  { left: "\\[", right: "\\]", display: true }
]
ignoredTags string[] undefined
Default:
[
  "script", "noscript",
  "style",  "textarea",
  "pre",    "code",
  "option"
]
ignoredClasses string[] undefined
preProcess function undefined

描述

这个插件使用 KaTeX 库来渲染你的 HTML 文档中的数学排版。 你只需要将 language-math 扩展添加到任何你想渲染的数学内容中。在 markdown 页面中,这可以通过使用 math 语言的代码块来完成:

# 这是一个 markdown 文档

```math
c = \pm\sqrt{a^2 + b^2}
```

或者直接将 language-math 添加到包含代码的 HTML 元素:

<p class="language-math">
  c = \pm\sqrt{a^2 + b^2}
</p>

安装

在你的 _config.ts 文件中导入此插件以使用它:

import lume from "lume/mod.ts";
import katex from "lume/plugins/katex.ts";

const site = lume();

site.use(katex(/* Options */));

export default site;

加载样式

为了在浏览器中渲染 katex 生成的任何 HTML,你将需要链接 CSS 文件并使用 HTML5 doctype。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/katex@0.16.2/dist/katex.css"
/>

Note

有关更多信息,请参阅 KaTeX 站点文档中的 Browser usage