如何在动态更改 HTML 中使用 KaTeX 自动渲染器?

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

是的，您可以为任何 DOM 元素调用renderMathInElement，例如您获得的document.getElementById("formula")元素。
调用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>

相关内容

最新更新

热门标签：