KaTeX does not render

Question

I feel almost stupid to ask this, but I can't get KaTeX to work on even the most minimal example:

<!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.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  <body>
      <p>$x^2 = \sqrt{y}$</p>
      <p id="1">Foo $x^2 = \sqrt{y}$  </p>
      <script>renderMathInElement(document.getElementById('1'))</script>

  </body>
</html>

If I run this in Firefox, I get this:

Also this error appears in the browser's console:

I don't get it. Is the cdn broken?

score 4 · Answer 1 · 2021-02-16T08:14:50.527

To auto-render equations without having to add any more JavaScript code, you must wrap inline math in $ and $ instead of dollar signs, because dollar signs are too common in normal text. So, use this instead:

<!DOCTYPE html>
<!-- KaTeX requires the use of the HTML5 doctype. Without it, KaTeX may not render properly -->
<html>
  <head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>

    <!-- To automatically render math in text elements, include the auto-render extension: -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  </head>
  <body>
      <p>\(x^2 = \sqrt{y}\)</p>
  </body>
</html>

score 3 · Accepted Answer · answered Oct 15 '18 at 11:41

Even though this question needs more explanation, I guess what you need is to show formulas in a math rendered way right? Just for the rest of us who hasn't seen that KaTex plugin before. Anyways, what happens with your code is that you are putting a paragraph element with some text, so that will render just normally to your webpage like:

$x^2 = \sqrt{y}$

The second line also appears in your firefox because it's just inside a P element, and because your script is not working, it just shows those two paragraphs and shows the console error.

Reading through this plugin, I think there is no method such as renderMathInElement, or at least I haven't seen it, but from the examples I saw in:

https://github.com/Khan/KaTeX/

You can see that normally people use katex.function, so if you use this as your script:

katex.render("YOUR FORMULAS HERE", elementById, {
            throwOnError: false
        });

Then you'll be ok with what you want to achieve, so here's the whole snippet, hope it helps:

<!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.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

        <!-- The loading of KaTeX is deferred to speed up page rendering -->
        <script src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>

        <!-- To automatically render math in text elements, include the auto-render extension: -->
        <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
    </head>
    <body>

        <p id="IdentificatorForElement"></p>

        <script>
            katex.render("f(x)^2  = \\sqrt{y}", document.getElementById('IdentificatorForElement'), {
                throwOnError: false
            });
        </script>
    </body>
</html>

Thanks for taking the time. The method renderMathInElement() is used in KaTeX's autorender documentation: https://katex.org/docs/autorender.html. I was able to work with katex.render() before, but I have tons of equations and I don't want to apply katex.render() to all of them but instead use the (supposedly) convenient autorender which is supposed to search the whole page for equations to parse. — Philipp Wacker, Oct 15 '18 at 12:15
So if the snippet I posted above was working, everything should be displayed as proper formula, because of the line containing the call to renderMathInElement() — Philipp Wacker, Oct 15 '18 at 12:20
@MercuryBench Well I think the main thing you asked for was to make the KaTeX's formula work, as you said on the most minimal example, and also that it gave you console errors, which I also explained how to get through. Can you mark this as resolved please? And if you have another question about this you can also put another question on stackoverflow. — Leo, Jan 11 '19 at 14:10

KaTeX does not render

2 Answers2

Linked