堆栈内存溢出
  简体   繁体   English

如何使用 KaTeX 渲染 $..$ 中的所有内联公式？

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

 原文  2014-12-09 09:19:36  0   4    javascript/ katex

问题描述

So I want to have KaTeX inline formulas like with MathJax.所以我想要像 MathJax 这样的 KaTeX 内联公式。
But so far I've found only render() function which "draws" a string to an element.但到目前为止，我发现只有render()函数将字符串“绘制”到元素。
And I need to modify a part of a text node in DOM.我需要修改 DOM 中文本节点的一部分。
I really couldn't find how to do this with KaTeX.我真的找不到如何用 KaTeX 做到这一点。 Does it have such functionality?它有这样的功能吗？
MathJax could do this. MathJax 可以做到这一点。

4 个解决方案

解决方案1
 26 已采纳  2017-07-25 11:15:19

Yes, you can render all $ -delimited formulas inline using KaTeX's auto-render extension .是的，您可以使用 KaTeX 的自动渲染扩展来内联渲染所有$分隔的公式。 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.根据该页面上的文档， $不是默认分隔符之一，因此您需要在调用renderMathInElement()并将display设置为false时设置它，这会呈现内联。 Below is one example and another from KaTeX can be found here .下面是一个例子，另一个来自 KaTeX 的例子可以在这里找到。

Note that \\ in the JavaScript corresponds to \ in the HTML.请注意，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>

解决方案2
 4  2020-02-19 00:09:29

As of early 2020, it seems that KaTeX 0.11.1 supports inline maths without using the "hack" in the answer by Vincent.截至 2020 年初，KaTeX 0.11.1 似乎支持内联数学，而不使用文森特答案中的“hack”。 The single dollar delimiters $ ... $ do not work but the escaped brackets \( ... \) instead do, as in the following minimal code and snippet:单美元分隔符$ ... $不起作用，但转义括号\( ... \)可以，如以下最小代码和片段所示：

<!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.

After some tests, I couldn't make dollar delimiters $ ... $ work but the brackets \( ... \) here working by default are an update respect to version 0.7.1 of KaTeX (anyway still available).经过一些测试，我无法使美元分隔符$ ... $工作，但默认情况下此处工作的括号\( ... \)是对 KaTeX 0.7.1 版的更新（无论如何仍然可用）。

解决方案3
 1  2015-05-08 07:41:03

render can take an extra third argument (default is false) to select inline displaymode: render 可以采用额外的第三个参数（默认为 false）来选择内联显示模式：

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

Is this what you are looking for?这是你想要的？

解决方案4
 0  2022-06-06 10:28:22

I couldn't get the answer by @Vincent to work.我无法通过@Vincent 得到答案来工作。 I had to wrap the renderMathInElement in a document.addEventListener .我必须将renderMathInElement包装在document.addEventListener中。 Like so:像这样：

<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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在不使用$$的情况下自动渲染katex？ - How can I auto render katex without having to use $$? 如何在 Katex 中创建换行符？ - How can I create a line break in Katex? 如何用博主上的 Katex 脚本替换 Matjax 脚本？ - How can I replace Matjax script with Katex script on blogger? KaTeX 不渲染 - KaTeX does not render 使用KaTeX或MathJax渲染TeX - Render TeX with KaTeX or MathJax 在浏览器中使用 KaTeX 渲染数学 - Render math with KaTeX in the browser Jsxgraph 如何嵌入 Katex 而不是 Mathjs - How can Jsxgraph embed Katex instead of Mathjs 如何在浏览器中使用自动渲染（KaTeX 0.9.0-alpha）？ - how to use Auto-render (KaTeX 0.9.0-alpha) in brower? 如何让 katex 使用具有输入字段的 HTML 元素？ - How can I make katex work with HTML elements that have an input field? 如何获得所有内联样式的列表？ - How can I get a list of all inline-styles?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM