KaTeX 不渲染答案

【问题标题】：KaTeX does not renderKaTeX 不渲染
【发布时间】：2019-03-19 15:38:53
【问题描述】：

我觉得问这个问题几乎是愚蠢的，但即使是最简单的示例，我也无法让 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/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>

如果我在 Firefox 中运行它，我会得到：

这个错误也会出现在浏览器的控制台中：

我不明白。 cdn坏了吗？

【问题讨论】：

标签： javascript html katex

【解决方案1】：

要在不添加更多 JavaScript 代码的情况下自动呈现方程式，您必须将内联数学包含在 $ 和 $ 中，而不是美元符号，因为美元符号在普通文本中太常见了。所以，改用这个：

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

【讨论】：

【解决方案2】：

尽管这个问题需要更多解释，但我想您需要的是以数学渲染的方式显示公式，对吧？仅适用于我们之前没有见过 KaTex 插件的其他人。无论如何，您的代码会发生什么是您正在放置一个带有一些文本的段落元素，以便正常呈现到您的网页，例如：

$x^2 = \sqrt{y}$

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

通读这个插件，我觉得没有renderMathInElement之类的方法，或者至少我没见过，但是从我看到的例子来看：

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

你可以看到通常人们使用 katex.function，所以如果你使用它作为你的脚本：

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

那么你就可以实现你想要实现的目标了，所以这是整个 sn-p，希望对你有所帮助：

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

【讨论】：

感谢您抽出宝贵时间。在 KaTeX 的自动渲染文档中使用了 renderMathInElement() 方法：katex.org/docs/autorender.html。我以前可以使用 katex.render() ，但是我有很多方程式，我不想将 katex.render() 应用于所有方程式，而是使用应该搜索的（据说）方便的自动渲染器要解析的方程式的整个页面。
因此，如果我在上面发布的 sn-p 工作正常，则所有内容都应显示为正确的公式，因为包含对 renderMathInElement() 的调用的行
@MercuryBench 好吧，我认为您要求的主要是使 KaTeX 的公式正常工作，正如您在最小的示例中所说的那样，它还给您带来了控制台错误，我还解释了如何通过，渡过。您可以将此标记为已解决吗？如果您对此还有其他问题，也可以在 stackoverflow 上提出其他问题。