Как использовать автоматический рендерер KaTeX в динамически меняющемся HTML? - PullRequest
Новая
       33

Как использовать автоматический рендерер KaTeX в динамически меняющемся HTML?

0 голосов
/ 21 сентября 2019

У меня есть два вопроса для начинающих по поводу использования автоматического рендеринга KaTeX.Оба связаны с кодом ниже.

Мой первый вопрос: нужно ли использовать document.body в renderMathInElement?Можно ли вызывать его только по абзацу с формулой 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>

1 Ответ

1 голос
/ 22 сентября 2019

  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>
...