KaTeX 不渲染

2024-01-07

我觉得问这个问题几乎是愚蠢的,但我无法让 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] /cdn-cgi/l/email-protection/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] /cdn-cgi/l/email-protection/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] /cdn-cgi/l/email-protection/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/ 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] /cdn-cgi/l/email-protection/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] /cdn-cgi/l/email-protection/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] /cdn-cgi/l/email-protection/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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

KaTeX 不渲染 的相关文章