如何在html中启用Katex？

Question

我正在编写一个markdown文件并编译为html，并且尝试插入带有Latex的数学公式。我尝试过Mathjax，但某些公式不受支持，因此我尝试插入Katex.I

    <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 auto-render extension。

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

数学内容与超文本标记语言内容分开的页面可能受益于不使用TeX分隔符将内容捆绑在一起，而只是让自动呈现器再次拆分它们。相反，这些页面可能会直接将数学内容提供给KaTeX呈现函数。就我个人而言，我将这种方法用于<script>标签中的数学内容，例如在this page上。

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加载后调用呈现函数。

<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>