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="/[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="/[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="/[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>
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?
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/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/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/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>
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?
Share Improve this question asked Oct 15, 2018 at 8:46 Philipp WackerPhilipp Wacker 2532 silver badges7 bronze badges2 Answers
Reset to default 4Even 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./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/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/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/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>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 mon 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>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr/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/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/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>
</body>
</html>