Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I render all inline formulas in $..$ with KaTeX?

So I want to have KaTeX inline formulas like with MathJax.
But so far I've found only render() function which "draws" a string to an element.
And I need to modify a part of a text node in DOM.
I really couldn't find how to do this with KaTeX. Does it have such functionality?
MathJax could do this.

like image 664
Sergey Avatar asked Dec 09 '14 09:12

Sergey


People also ask

Is KaTeX better than MathJax?

KaTeX, according to most benchmarks I've seen, is faster than MathJax, by a long shot. However, it has somewhat incomplete support for LaTeX, so that may be an issue. MathJax is pretty slow, relative to the others, but it has almost complete support for LaTeX. If that's the price you're willing to pay, then go for it.

What is KaTeX and LaTeX?

LaTeX helps researchers and academicians to write content in TeX language, which is then rendered into a format like the one we see in books or journals. KaTeX is a modified version inspired by LaTeX typesetting developed by the Khan Academy.


1 Answers

Yes, you can render all $-delimited formulas inline using KaTeX's auto-render extension. Per the documentation on that page, $ is not one of the default delimiters so you'll need to set it when you call renderMathInElement() and set display to false, which renders inline. Below is one example and another from KaTeX can be found here.

Note that \\ in the JavaScript corresponds to \ in the HTML.

<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js"></script>
</head>
<body>
    <div>The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$ will be rendered as a block element.</div>
    <br>
    <div>The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\] will be rendered as a block element.</div>
    <script>
      renderMathInElement(
          document.body,
          {
              delimiters: [
                  {left: "$$", right: "$$", display: true},
                  {left: "\\[", right: "\\]", display: true},
                  {left: "$", right: "$", display: false},
                  {left: "\\(", right: "\\)", display: false}
              ]
          }
      );
    </script>
</body>
</html>
like image 155
Vincent Avatar answered Oct 22 '22 19:10

Vincent