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

取决于应用程序，其他方法可能更好，因此我不会说这是对所有人都适用的方法，但是对于许多应用程序来说，这是正确执行方法的一种方法。通过Ajax交互不断更改内容的高度动态的页面不能与自动渲染扩展的标准配置一起很好地工作。对于那些，最好将自动渲染器与重新加载设备集成在一起。

数学内容与HTML内容分开的页面可能会受益于不将内容与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加载后调用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>

如何在HTML中启用Katex？

2 个答案: