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

【问题标题】：How to use KaTeX auto-renderer in dynamically changing HTML?如何在动态更改 HTML 中使用 KaTeX 自动渲染器？
【发布时间】：2019-09-21 12:07:04
【问题描述】：

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

【问题讨论】：

标签： katex

【解决方案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>

【讨论】：