如何在$..$中用KaTeX呈现所有内联公式？
如何在$..$中用KaTeX呈现所有内联公式？
提问于 2014-12-09 09:19:36
所以我想要KaTeX内联公式，比如MathJax。
但到目前为止，我只找到了render()函数，它将字符串“绘制”到元素。
我需要修改DOM中文本节点的一部分。
我真的找不到如何用KaTeX来做这件事。它有这样的功能吗？
MathJax可以做到这一点。
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-07-25 11:15:19
是的，您可以使用KaTeX的$-delimited 自动渲染扩展内联地呈现所有-delimited公式。根据该页面上的文档，$不是默认的分隔符之一，因此您需要在调用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>Stack Overflow用户
发布于 2020-02-19 00:09:29
到2020年初，KaTeX 0.11.1似乎支持内联数学，而不使用文森特的答案中的“黑客”。单个美元分隔符$ ... $不起作用，但转义括号\( ... \)却起作用，如下所示的最小代码和代码片段所示：
<!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^{i\pi}+1=0$ <!-- does not work -->
dolor sit amet,
\(e^{i\pi}+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^{i\pi}+1=0$ <!-- does not work -->
dolor sit amet,
\(e^{i\pi}+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的更新(无论如何仍然可用)。
Stack Overflow用户
发布于 2015-05-08 07:41:03
render可以采用额外的第三个参数(默认值为false)来选择内联显示模式：
katex.render("c = \\pm\\sqrt{a^2 + b^2}", element, { displayMode: true });这就是你要找的吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27375252
复制相关文章
相似问题
腾讯云开发者
