javascript - KaTeX不渲染

我问这个问题几乎是愚蠢的，但是即使是最简单的例子，我也无法让KaTeX使用:

<!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-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

    <!-- The loading of KaTeX is deferred to speed up page rendering -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

如果我在Firefox中运行此代码，则会得到以下信息:

此错误也会出现在浏览器的控制台中:

我不明白CDN坏了吗？

最佳答案

即使这个问题需要更多的解释，我想您所需要的还是以数学渲染的方式显示公式，对吗？对于我们其他以前从未看过KaTex插件的人。无论如何，代码发生的事情是，您在段落元素中添加了一些文本，因此可以正常呈现到您的网页上，例如:

$ x ^ 2 =\sqrt {y} $

第二行也出现在您的firefox中，因为它仅位于P元素内，并且由于脚本不起作用，因此仅显示了这两段并显示了控制台错误。

通过阅读此插件，我认为没有诸如renderMathInElement之类的方法，或者至少我还没有看到它，但是从我在以下示例中看到的方法:

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

您可以看到人们通常使用katex.function，因此，如果将其用作脚本:

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

这样您就可以实现自己的目标了，所以下面是整个代码段，希望对您有所帮助:

<!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-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">

        <!-- The loading of KaTeX is deferred to speed up page rendering -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

关于javascript - KaTeX不渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52812848/