CODEWITHSUNDEEP
katex
Ferenc Beleznay
Ferenc Beleznay

Reputation: 191

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

I have two beginner questions about using KaTeX auto-renderer. Both are related to the code below.

My first question: Do I need to use document.body in renderMathInElement? Can it be called only on the paragraph with id formula? If yes, how? I tried several ways, but nothing worked. Probably I just don't know the correct syntax.

My second question: After pressing the button, the changed text is not rendered. How and where shall I call renderMathInElement again to look for the new formulas in the page? Again, I tried several ways (including calling it right after changing the text), nothing worked.

<!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/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 3

Views: 2652

Answers (1)

MvG
MvG

Reputation: 60988

  1. Yes, you can call renderMathInElement for any DOM element, e.g. the one you get for document.getElementById("formula").

  2. Calling renderMathInElement(x) essentially does what you want. Except that you also need to escape the backslashes in your JavaScript string literal by doubling them.

Taken together you get something like this:

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/[email protected]/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 6

Related Questions