KaTeX does not render | 易学教程

问题

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?

回答1:

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>

回答2:

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

来源：https://stackoverflow.com/questions/52812848/katex-does-not-render

标签

javascript

html

katex