问题

以下是您要翻译的内容：

I would like to show some LaTeX Equations in Quarto. When running the following example code, it does look right in the preview of RStudio while in the output it doesn't. Here some reproducible code:

Output preview RStudio:

Output HTML:

[![enter image description here][2]][2]

So it does look like the \\ to add a break between the $$ notation doesn't work in the output of HTML but only in the preview. So I was wondering if anyone knows how to align the equations below each other?

HTML file of document:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta charset="utf-8">
<meta name="generator" content="quarto-1.2.269">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">


<title>Latex equations in Quarto</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
  width: 0.8em;
  margin: 0 0.8em 0.2em -1.6em;
  vertical-align: middle;
}
</style>


<script src="create_dataframe_files/libs/clipboard/clipboard.min.js"></script>
<script src="create_dataframe_files/libs/quarto-html/quarto.js"></script>
<script src="create_dataframe_files/libs/quarto-html/popper.min.js"></script>
<script src="create_dataframe_files/libs/quarto-html/tippy.umd.min.js"></script>
<script src="create_dataframe_files/libs/quarto-html/anchor.min.js"></script>
<link href="create_dataframe_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="create_dataframe_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="create_dataframe_files/libs/bootstrap/bootstrap.min.js"></script>
<link href="create_dataframe_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="create_dataframe_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">

  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js" type="text/javascript"></script>

</head>

<body class="fullcontent">

<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">

<main class="content" id="quarto-document-content">

<header id="title-block-header" class="quarto-title-block default">
<div class="quarto-title">
<h1 class="title">Latex equations in Quarto</h1>
</div>



<div class="quarto-title-meta">

    

  
    

  </div>
  

</header>

<p><span class="math display">\[
Pr(A) = 0.5 \\
Pr(B) = 0.5
\]</span></p>

</main>
<!-- /main column -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
  const toggleBodyColorMode = (bsSheetEl) => {
    const mode = bsSheetEl.getAttribute("data-mode");
    const bodyEl = window.document.querySelector("body");
    if (mode === "dark") {
      bodyEl.classList.add("quarto-dark");
      bodyEl.classList remove ("quarto-light");
    } else {
      bodyEl.classList.add("quarto-light");
      bodyEl.classList.remove("quarto-dark");
    }
  }
  const toggleBodyColorPrimary = () => {
    const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
    if (bsSheetEl) {
      toggleBodyColorMode(bsSheetEl);
    }
  }
  toggleBodyColorPrimary();  
  const icon = "";
  const anchorJS = new window.AnchorJS();
  anchorJS.options = {
    placement: 'right',
    icon: icon
  };
  anchorJS.add('.anchored');
  const clipboard = new window.ClipboardJS('.code-copy-button', {
    target: function(trigger) {
      return trigger.previousElementSibling;
    }
  });
  clipboard.on('success', function(e) {
    // button target
    const button = e.trigger;
    // don't keep focus
    button.blur();
    // flash "checked"
    button.classList.add('code-copy-button-checked');
    var currentTitle = button.getAttribute("title");
    button.setAttribute("title", "Copied!");
    let tooltip;
    if (window.bootstrap) {
      button.setAttribute("data-bs-toggle", "tooltip");
      button.setAttribute("data-bs-placement", "left");
      button.setAttribute("data-bs-title", "Copied!");
      tooltip = new bootstrap.Tooltip(button, 
        { trigger: "manual", 
          customClass: "code-copy-button-tooltip",
          offset: [0, -8]});
      tooltip.show();    
    }
    setTimeout(function() {
      if (tooltip) {
        tooltip.hide();
        button.removeAttribute("data-bs-title");
        button.removeAttribute("data-bs-toggle");
        button.removeAttribute("data-bs-placement");
      }
      button.setAttribute("title", currentTitle);
      button.classList.remove('code-copy-button-checked');
    }, 1000);
    // clear code selection
    e.clearSelection();
  });
  function tippyHover(el, contentFn) {
    const config = {
      allowHTML: true,
      content: contentFn,
      maxWidth: 500,
      delay: 100,
      arrow: false,
      appendTo: function(el) {
          return el.parentElement;
      },
      interactive: true,
      interactiveBorder: 10,
      theme: 'quarto',
      placement: 'bottom-start'
    };
    window.tippy(el, config); 
  }
  const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
  for (var i=0; i<noterefs.length; i++) {
    const ref = noterefs[i];
    tippyHover(ref, function() {
      // use id or data attribute instead here
      let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
      try { href = new URL(href).hash; } catch {}
      const id = href.replace(/^#\/?/, "");
      const note = window.document.getElementById(id);
      return note.innerHTML;
    });
  }
  const findCites = (el) => {
    const parentEl = el.parentElement;
    if (parentEl) {
      const cites = parentEl.dataset.cites;
      if (cites) {
        return {
          el,
          cites: cites.split(' ')
        };
      } else {
        return findCites(el.parentElement)
     

<details>
<summary>英文:</summary>

I would like to show some [LaTeX Equations](https://quarto.org/docs/visual-editor/technical.html) in `Quarto`. When running the following example code, it does look right in the preview of RStudio while in the output it doesn&#39;t. Here some reproducible code:

    ---
    title: &quot;Latex equations in Quarto&quot;
    format: html
    ---
    
    $$
    Pr(A) = 0.5 \\
    Pr(B) = 0.5
    $$

Output preview RStudio:

[![enter image description here][1]][1]

Output HTML:

[![enter image description here][2]][2]

So it does look like the `\\` to add a break between the `$$` notation doesn&#39;t work in the output of HTML but only in the preview. So I was wondering if anyone knows how to align the equations below each other?

***

HTML file of document:

    &lt;!DOCTYPE html&gt;
    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; lang=&quot;en&quot; xml:lang=&quot;en&quot;&gt;&lt;head&gt;
    
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;generator&quot; content=&quot;quarto-1.2.269&quot;&gt;
    
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, user-scalable=yes&quot;&gt;
    
    
    &lt;title&gt;Latex equations in Quarto&lt;/title&gt;
    &lt;style&gt;
    code{white-space: pre-wrap;}
    span.smallcaps{font-variant: small-caps;}
    div.columns{display: flex; gap: min(4vw, 1.5em);}
    div.column{flex: auto; overflow-x: auto;}
    div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
    ul.task-list{list-style: none;}
    ul.task-list li input[type=&quot;checkbox&quot;] {
      width: 0.8em;
      margin: 0 0.8em 0.2em -1.6em;
      vertical-align: middle;
    }
    &lt;/style&gt;
    
    
    &lt;script src=&quot;create_dataframe_files/libs/clipboard/clipboard.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;create_dataframe_files/libs/quarto-html/quarto.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;create_dataframe_files/libs/quarto-html/popper.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;create_dataframe_files/libs/quarto-html/tippy.umd.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;create_dataframe_files/libs/quarto-html/anchor.min.js&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;create_dataframe_files/libs/quarto-html/tippy.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;create_dataframe_files/libs/quarto-html/quarto-syntax-highlighting.css&quot; rel=&quot;stylesheet&quot; id=&quot;quarto-text-highlighting-styles&quot;&gt;
    &lt;script src=&quot;create_dataframe_files/libs/bootstrap/bootstrap.min.js&quot;&gt;&lt;/script&gt;
    &lt;link href=&quot;create_dataframe_files/libs/bootstrap/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;create_dataframe_files/libs/bootstrap/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; id=&quot;quarto-bootstrap&quot; data-mode=&quot;light&quot;&gt;
    
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    
    &lt;/head&gt;
    
    &lt;body class=&quot;fullcontent&quot;&gt;
    
    &lt;div id=&quot;quarto-content&quot; class=&quot;page-columns page-rows-contents page-layout-article&quot;&gt;
    
    &lt;main class=&quot;content&quot; id=&quot;quarto-document-content&quot;&gt;
    
    &lt;header id=&quot;title-block-header&quot; class=&quot;quarto-title-block default&quot;&gt;
    &lt;div class=&quot;quarto-title&quot;&gt;
    &lt;h1 class=&quot;title&quot;&gt;Latex equations in Quarto&lt;/h1&gt;
    &lt;/div&gt;
    
    
    
    &lt;div class=&quot;quarto-title-meta&quot;&gt;
    
        
      
        
      &lt;/div&gt;
      
    
    &lt;/header&gt;
    
    &lt;p&gt;&lt;span class=&quot;math display&quot;&gt;\[
    Pr(A) = 0.5 \\
    Pr(B) = 0.5
    \]&lt;/span&gt;&lt;/p&gt;
    
    &lt;/main&gt;
    &lt;!-- /main column --&gt;
    &lt;script id=&quot;quarto-html-after-body&quot; type=&quot;application/javascript&quot;&gt;
    window.document.addEventListener(&quot;DOMContentLoaded&quot;, function (event) {
      const toggleBodyColorMode = (bsSheetEl) =&gt; {
        const mode = bsSheetEl.getAttribute(&quot;data-mode&quot;);
        const bodyEl = window.document.querySelector(&quot;body&quot;);
        if (mode === &quot;dark&quot;) {
          bodyEl.classList.add(&quot;quarto-dark&quot;);
          bodyEl.classList.remove(&quot;quarto-light&quot;);
        } else {
          bodyEl.classList.add(&quot;quarto-light&quot;);
          bodyEl.classList.remove(&quot;quarto-dark&quot;);
        }
      }
      const toggleBodyColorPrimary = () =&gt; {
        const bsSheetEl = window.document.querySelector(&quot;link#quarto-bootstrap&quot;);
        if (bsSheetEl) {
          toggleBodyColorMode(bsSheetEl);
        }
      }
      toggleBodyColorPrimary();  
      const icon = &quot;&quot;;
      const anchorJS = new window.AnchorJS();
      anchorJS.options = {
        placement: &#39;right&#39;,
        icon: icon
      };
      anchorJS.add(&#39;.anchored&#39;);
      const clipboard = new window.ClipboardJS(&#39;.code-copy-button&#39;, {
        target: function(trigger) {
          return trigger.previousElementSibling;
        }
      });
      clipboard.on(&#39;success&#39;, function(e) {
        // button target
        const button = e.trigger;
        // don&#39;t keep focus
        button.blur();
        // flash &quot;checked&quot;
        button.classList.add(&#39;code-copy-button-checked&#39;);
        var currentTitle = button.getAttribute(&quot;title&quot;);
        button.setAttribute(&quot;title&quot;, &quot;Copied!&quot;);
        let tooltip;
        if (window.bootstrap) {
          button.setAttribute(&quot;data-bs-toggle&quot;, &quot;tooltip&quot;);
          button.setAttribute(&quot;data-bs-placement&quot;, &quot;left&quot;);
          button.setAttribute(&quot;data-bs-title&quot;, &quot;Copied!&quot;);
          tooltip = new bootstrap.Tooltip(button, 
            { trigger: &quot;manual&quot;, 
              customClass: &quot;code-copy-button-tooltip&quot;,
              offset: [0, -8]});
          tooltip.show();    
        }
        setTimeout(function() {
          if (tooltip) {
            tooltip.hide();
            button.removeAttribute(&quot;data-bs-title&quot;);
            button.removeAttribute(&quot;data-bs-toggle&quot;);
            button.removeAttribute(&quot;data-bs-placement&quot;);
          }
          button.setAttribute(&quot;title&quot;, currentTitle);
          button.classList.remove(&#39;code-copy-button-checked&#39;);
        }, 1000);
        // clear code selection
        e.clearSelection();
      });
      function tippyHover(el, contentFn) {
        const config = {
          allowHTML: true,
          content: contentFn,
          maxWidth: 500,
          delay: 100,
          arrow: false,
          appendTo: function(el) {
              return el.parentElement;
          },
          interactive: true,
          interactiveBorder: 10,
          theme: &#39;quarto&#39;,
          placement: &#39;bottom-start&#39;
        };
        window.tippy(el, config); 
      }
      const noterefs = window.document.querySelectorAll(&#39;a[role=&quot;doc-noteref&quot;]&#39;);
      for (var i=0; i&lt;noterefs.length; i++) {
        const ref = noterefs[i];
        tippyHover(ref, function() {
          // use id or data attribute instead here
          let href = ref.getAttribute(&#39;data-footnote-href&#39;) || ref.getAttribute(&#39;href&#39;);
          try { href = new URL(href).hash; } catch {}
          const id = href.replace(/^#\/?/, &quot;&quot;);
          const note = window.document.getElementById(id);
          return note.innerHTML;
        });
      }
      const findCites = (el) =&gt; {
        const parentEl = el.parentElement;
        if (parentEl) {
          const cites = parentEl.dataset.cites;
          if (cites) {
            return {
              el,
              cites: cites.split(&#39; &#39;)
            };
          } else {
            return findCites(el.parentElement)
          }
        } else {
          return undefined;
        }
      };
      var bibliorefs = window.document.querySelectorAll(&#39;a[role=&quot;doc-biblioref&quot;]&#39;);
      for (var i=0; i&lt;bibliorefs.length; i++) {
        const ref = bibliorefs[i];
        const citeInfo = findCites(ref);
        if (citeInfo) {
          tippyHover(citeInfo.el, function() {
            var popup = window.document.createElement(&#39;div&#39;);
            citeInfo.cites.forEach(function(cite) {
              var citeDiv = window.document.createElement(&#39;div&#39;);
              citeDiv.classList.add(&#39;hanging-indent&#39;);
              citeDiv.classList.add(&#39;csl-entry&#39;);
              var biblioDiv = window.document.getElementById(&#39;ref-&#39; + cite);
              if (biblioDiv) {
                citeDiv.innerHTML = biblioDiv.innerHTML;
              }
              popup.appendChild(citeDiv);
            });
            return popup.innerHTML;
          });
        }
      }
    });
    &lt;/script&gt;
    &lt;/div&gt; &lt;!-- /content --&gt;
    
    
    
    &lt;/body&gt;&lt;/html&gt;

  [1]: https://i.stack.imgur.com/dTof0.png
  [2]: https://i.stack.imgur.com/FkaBw.png

</details>


# 答案1
**得分**: 2

你可以使用`align` LaTeX 环境，例如：

```latex
---
title: "在 Quarto 中使用 LaTeX 公式"
format:
  html:
    html-math-method: mathjax
---
    
\begin{align*}
Pr(A) & = 0.5 \\
Pr(B) & = 0.5
\end{align*}

英文:

You can use the align latex environment, e.g.

---
title: &quot;Latex equations in Quarto&quot;
format:
html:
html-math-method: mathjax
---
\begin{align*}
Pr(A) &amp;= 0.5 \\
Pr(B) &amp;= 0.5
\end{align*}

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Mathjax方程在Quarto中不能垂直排列。

问题

HTML音频在按下特定键时播放问题

CSS的字母间距将按钮扩展到右边。

如何在Flask API的post请求主体中显示图像？

Background image for beamer set in quarto is not covering the full slides

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论