如何使用 KaTeX 以 $.$ 呈现所有内联公式

所以我想像MathJax一样拥有KaTeX内联公式。
但到目前为止，我只找到了render()函数将字符串"绘制"到元素。
我需要修改 DOM 中文本节点的一部分。
我真的找不到如何使用 KaTeX 做到这一点。它有这样的功能吗？
MathJax可以做到这一点。

是的，您可以使用 KaTeX 的自动渲染扩展内联渲染所有$分隔的公式。根据该页面上的文档，$ 不是默认分隔符之一，因此您需要在调用 renderMathInElement() 时对其进行设置，并将display设置为 false ，这将内联呈现。下面是一个示例，可以在此处找到来自KaTeX的另一个示例。

请注意，JavaScript 中的\对应于 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>

截至 2020 年初，KaTeX 0.11.1 似乎支持内联数学，而无需使用 Vincent 答案中的"hack"。单美元分隔符 $ ... $ 不起作用，但转义括号( ... )起作用，如以下最小代码和代码片段所示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Katex 0.11.1</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
</head>
<body>
Lorem ipsum 
$e^{ipi}+1=0$ <!-- does not work -->
dolor sit amet, 
(e^{ipi}+1=0) <!-- this works -->
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</body>
</html>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js" integrity="sha384-y23I5Q6l+B6vatafAwxRu/0oK/79VlbSz7Q9aiSZUvyWYIYsd+qj+o24G5ZU2zJz" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
Lorem ipsum 
$e^{ipi}+1=0$ <!-- does not work -->
dolor sit amet, 
(e^{ipi}+1=0) <!-- this works -->
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

经过一些测试，我无法使美元分隔符 $ ... $ 工作，但此处默认工作的括号( ... )是对 KaTeX 0.7.1 版本的更新（无论如何仍然可用）。

渲染可以多取第三个参数（默认值为 false）来选择内联显示模式：

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

这是你要找的吗？

我无法通过@Vincent工作来获得答案。我不得不把renderMathInElement包裹在document.addEventListener里.这样：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.css" integrity="sha384-ZPe7yZ91iWxYumsBEOn7ieg8q/o+qh/hQpSaPow8T6BwALcXSCS6C6fSRPIAnTQs" crossorigin="anonymous">
<!-- The loading of KaTeX is deferred to speed up page rendering -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.15.6/dist/katex.min.js" integrity="sha384-ljao5I1l+8KYFXG7LNEA7DyaFvuvSCmedUf6Y6JI7LJqiu8q5dEivP2nDdFH31V4" 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.15.6/dist/contrib/auto-render.min.js" integrity="sha384-+XBljXPPiv+OzfbB3cVmLHf4hdUFHlWNZN5spNQ7rmHTXpd7WvJum6fIACpNNfIR" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
<script>
    // https://github.com/KaTeX/KaTeX/blob/main/docs/autorender.md
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
            // customised options
            // • auto-render specific keys, e.g.:
                delimiters: [
                {left: '$$', right: '$$', display: true},
                {left: '$', right: '$', display: false},
                {left: '(', right: ')', display: false},
                {left: '[', right: ']', display: true},
                {left: "begin{equation}", right: "end{equation}", display: true},
                {left: "begin{align}", right: "end{align}", display: true},
            ],
            // • rendering keys, e.g.:
            throwOnError : false
        });
    });
</script>

相关内容

最新更新

热门标签：