如何在动态变化中使用KaTeX auto-renderer HTML？

Question

我有两个关于使用 KaTeX 自动渲染器的初学者问题。两者都与下面的代码有关。

我的第一个问题：我需要在 renderMathInElement 中使用 document.body 吗？只能在有id公式的段落上调用吗？如果是，如何？我尝试了几种方法，但没有任何效果。可能我只是不知道正确的语法。

我的第二个问题：按下按钮后，更改的文本没有呈现。我应如何以及在何处再次调用 renderMathInElement 以在页面中查找新公式？同样，我尝试了几种方法（包括在更改文本后立即调用它），但没有任何效果。

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // ...options...
        });
    });
</script>
  </head>

    <body>
<p id="formula">Consider the circle with equation \(x^2+y^2=25\).</p>

<button onclick="myFunction()">Change text</button>

<script>
function myFunction() {
  var x = document.getElementById("formula");
  x.innerHTML = "Find the definite integral \(\int_0^1 xdx.\)";  
}
</script>

    </body>    

</html>

Answer 1

是的，您可以为任何 DOM 元素调用 renderMathInElement，例如你用 document.getElementById("formula").
调用 renderMathInElement(x) 本质上就是你想要的。除了您还需要 escape 将 JavaScript 字符串文字中的反斜杠加倍。

合在一起你会得到这样的东西：

let opts = {
  // ...options...
}
document.addEventListener("DOMContentLoaded", function() {
  renderMathInElement(document.getElementById("formula"), opts);
});
function myFunction() {
  var x = document.getElementById("formula");
  x.innerHTML = "Find the definite integral \(\int_0^1 xdx.\)"; 
  renderMathInElement(x, opts);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>

<p id="formula">Consider the circle with equation \(x^2+y^2=25\).</p>
<button onclick="myFunction()">Change text</button>

如何在动态变化中使用KaTeX auto-renderer HTML？

How to use KaTeX auto-renderer in dynamically changing HTML?

katex