KaTeX不渲染 [英] KaTeX does not render
问题描述
问这个问题我几乎很愚蠢，但是即使是最简单的例子，我也无法让KaTeX进行工作:
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>
如果我在Firefox中运行它，我会得到:
If I run this in Firefox, I get this:
此错误也出现在浏览器的控制台中:
Also this error appears in the browser's console:
我不明白.CDN坏了吗?
I don't get it. Is the cdn broken?
推荐答案
即使这个问题需要更多说明，我想您所需要的还是以数学渲染的方式显示公式，对吗?对于我们其他以前从未看过KaTex插件的人.无论如何，您的代码会发生什么，就是您在段落元素中添加了一些文本，因此可以正常显示在您的网页上，例如:
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} $
$x^2 = \sqrt{y}$
第二行也出现在您的firefox中，因为它仅位于P元素内，并且由于脚本不起作用，因此仅显示了这两段并显示了控制台错误.
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.
通读此插件，我认为没有诸如renderMathInElement之类的方法，或者至少我没有看到它，但是从我在以下示例中看到的
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/
您可以看到通常人们使用katex.function，因此，如果将其用作脚本:
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>这篇关于KaTeX不渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
