数学扩展
MathJax 和 KaTeX 是两个流行的库,用于在浏览器中显示数学内容。尽管这两个库提供类似的功能,但它们使用不同的语法并具有不同的配置选项。此文档站点提供了有关如何轻松地将它们与 Material for MkDocs 集成的信息。
配置
以下配置支持使用 MathJax 和 KaTeX 渲染块和内联块方程。
MathJax
MathJax 是一个功能强大且灵活的库,支持多种输入格式,例如 LaTeX、MathML、AsciiMath,以及各种输出格式,例如 HTML、SVG、MathML。要在项目中使用 MathJax,请将以下行添加到您的 .mkdocs.yml
文件mkdocs.yml
markdown_extensions:
- pymdownx.arithmatex:
generic: true
extra_javascript:
- javascripts/mathjax.js
- https://polyfill.io/v3/polyfill.min.js?features=es6
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
文件 docs/javascripts/mathjax.js
window.MathJax = {
tex: {
inlineMath: [["\\(", "\\)"]],
displayMath: [["\\[", "\\]"]],
processEscapes: true,
processEnvironments: true
},
options: {
ignoreHtmlClass: ".*|",
processHtmlClass: "arithmatex"
}
};
document$.subscribe(() => {
MathJax.startup.output.clearCache()
MathJax.typesetClear()
MathJax.texReset()
MathJax.typesetPromise()
})
请参阅其他配置选项:
KaTeX
KaTeX 是一个轻量级库,专注于速度和简单性。它支持 LaTeX 语法的子集,并且可以将数学呈现为 HTML 和 SVG。要在项目中使用 KaTeX,请将以下行添加到您的 .mkdocs.yml
文件mkdocs.yml
markdown_extensions:
- pymdownx.arithmatex:
generic: true
extra_javascript:
- javascripts/katex.js
- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.js
- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js
extra_css:
- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css
文件 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 }
],
})
})