Geek Answers Handbook

How can I display all the built-in formulas in $ .. $ using KaTeX?

Therefore, I want to have KaTeX built-in formulas, for example, with MathJax.
But so far I have only found a function render()that "draws" a string for an element.
And I need to change part of the node text in the DOM.
I really could not find how to do this with KaTeX. Does it have such functionality?
MathJax can do this.

+4
source share
2 answers

Yes, you can display all $-defined inline formulas using the KaTeX auto-update extension . The documentation on this page is $not one of the default delimiters, so you need to set it when you call renderMathInElement()and set displayto falsewhich inline displays. Below is one example, and another from KaTeX can be found here .

Please note that \\in JavaScript it matches \in 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>
+4
source

render can take an additional third argument (false by default) to select inline displaymode:

katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, { displayMode: true });

Is this what you are looking for?

+1
source

More articles:


All Articles