2

我有两个关于使用 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>
4

1 回答 1

4

  1. 是的，您可以调用renderMathInElement任何 DOM 元素，例如您为document.getElementById("formula").

  2. 调用renderMathInElement(x)本质上是你想要的。除了您还需要通过加倍来转义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>

于 2019-09-22T20:07:55.330 回答