如何在html中启用Katex

Question

我正在编写一个markdown文件并编译为html，我正在尝试插入带有Latex的数学方程。我尝试过Mathjax，但有些方程不受支持，所以我尝试了Katex。我插入了

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.css" integrity="sha384-JwmmMju6Z7M9jiY4RXeJLoNb3aown2QCC/cI7JPgmOLsn3n33pdwAj0Ml/CMMd1W" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.js" integrity="sha384-atIluo+2Hixq8HCazSQWa1JjeC5L0CQeWAx74Q+EbqgAW4UixbrBQF4+1jvBX01b" crossorigin="anonymous"></script>

正如网站上所说，但当我打开html文件时，方程仍然显示在Latex代码中。在html上插入数学方程式的正确方法是什么？

Answer 1

KaTeX本身只是一个库，提供将类似LaTeX的输入转换为HTML/DOM输出的函数。为了将该功能与页面的内容联系起来，您可以使用其他代码，例如贡献的KaTeX自动渲染扩展。

根据应用程序的不同，其他方法可能会更好，所以我不会说这是对每个人来说都是正确的方法，但对许多应用程序来说，这是正确的一种方法。通过Ajax交互不断更改内容的高度动态页面与自动呈现扩展的标准配置不太兼容。对于那些人来说，最好将自动渲染器与重载机制集成在一起。

数学内容与HTML内容分离的页面可能会受益于不将内容与TeX分隔符聚集在一起，只为了让自动呈现器再次将它们分开。相反，这些页面可能会将数学内容直接提供给KaTeX渲染函数。就我个人而言，我在<script>标签中的数学内容中使用了这种方法，例如在这个页面上。

Answer 2

您需要在html 中包含auto-render.js

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>

并在html加载后调用render函数

<script>
$(document).ready(function () { // this need jquery
renderMathInElement(document.body, {
// ...options...
delimiters: [
{ left: "$$", right: "$$", display: true },
{ left: "$", right: "$", display: false },
{ left: "\[", right: "\]", display: true }
]
});
});
</script>