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

霸气de小男生 提交于 2019-12-03 13:56:45

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>

render can take an extra third argument (default is false) to select inline displaymode:

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

Is this what you are looking for?

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!