friendly/test-newcommand.html

## test-newcommand.html
<!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.0.37">

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


<title>Quarto: Test LaTeX newcommands in HTML doc</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
  { counter-reset: source-line 0; }
pre.numberSource code > span
  { position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
  { content: counter(source-line);
    position: relative; left: -1em; text-align: right; vertical-align: baseline;
    border: none; display: inline-block;
    -webkit-touch-callout: none; -webkit-user-select: none;
    -khtml-user-select: none; -moz-user-select: none;
    -ms-user-select: none; user-select: none;
    padding: 0 4px; width: 4em;
    color: #aaaaaa;
  }
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa;  padding-left: 4px; }
div.sourceCode
  {   }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>


<script src="test-newcommand_files/libs/clipboard/clipboard.min.js"></script>
<script src="test-newcommand_files/libs/quarto-html/quarto.js"></script>
<script src="test-newcommand_files/libs/quarto-html/popper.min.js"></script>
<script src="test-newcommand_files/libs/quarto-html/tippy.umd.min.js"></script>
<script src="test-newcommand_files/libs/quarto-html/anchor.min.js"></script>
<link href="test-newcommand_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="test-newcommand_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="test-newcommand_files/libs/bootstrap/bootstrap.min.js"></script>
<link href="test-newcommand_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="test-newcommand_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">Quarto: Test LaTeX newcommands in HTML doc</h1>
</div>


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


  </div>


</header>

<p>In a Quarto document, I want to be able to use more extensive math LaTeX features than are typical for simple equations, using some extensions presumably provided by <code>mathjax</code>, particularly for matrix expressions. (I think, but am not sure, that the latest Quarto uses <code>mathjax</code> v 3.2. )</p>
<p>As a simiple example, here I use a straightforward math equation with no special stuff, with <code>\mathbf{}</code> used for matrices and vectors. This works well and the equation appears nicely in the RStudio editor window. The source code is:</p>
<div class="sourceCode" id="cb1"><pre class="sourceCode latex code-with-copy"><code class="sourceCode latex"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span><span class="sc">\mathbf</span><span class="ss">{y} = </span><span class="sc">\mathbf</span><span class="ss">{X} </span><span class="sc">\;</span><span class="ss"> </span><span class="sc">\mathbf</span><span class="ss">{</span><span class="sc">\beta</span><span class="ss">} + </span><span class="sc">\mathbf</span><span class="ss">{u}, </span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="sc">\quad\mbox</span><span class="ss">{   with   }</span><span class="sc">\quad</span><span class="ss"> </span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="sc">\mathbf</span><span class="ss">{u} </span><span class="sc">\sim</span><span class="ss"> </span><span class="sc">\mathcal</span><span class="ss">{N} (0, </span><span class="sc">\sigma</span><span class="ss">^2 </span><span class="sc">\mathbf</span><span class="ss">{I}) ,</span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p><span class="math display">\[\mathbf{y} = \mathbf{X} \; \mathbf{\beta} + \mathbf{u},
\quad\mbox{   with   }\quad
\mathbf{u} \sim \mathcal{N} (0, \sigma^2 \mathbf{I}) ,
\]</span></p>
<p>However, in another version, Iâd like to show the size of matrices using subscripts.<br>
This also works, but it fails if I try to include an equation number <code>(eq-mlm)</code>.</p>
<div class="sourceCode" id="cb2"><pre class="sourceCode latex code-with-copy"><code class="sourceCode latex"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a><span class="sc">\mathbf</span><span class="ss">{Y}_{n </span><span class="sc">\times</span><span class="ss"> p} = </span></span>
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a><span class="sc">\mathbf</span><span class="ss">{X}_{n </span><span class="sc">\times</span><span class="ss"> q} </span><span class="sc">\,</span><span class="ss"> </span><span class="sc">\mathbf</span><span class="ss">{B}_{q </span><span class="sc">\times</span><span class="ss"> p} + </span><span class="sc">\mathbf</span><span class="ss">{U}_{n </span><span class="sc">\times</span><span class="ss"> p} </span><span class="sc">\:\:</span><span class="ss"> ,</span></span>
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p><span class="math display">\[
\mathbf{Y}_{n \times p} =
\mathbf{X}_{n \times q} \, \mathbf{B}_{q \times p} + \mathbf{U}_{n \times p} \:\: ,
\]</span></p>
<section id="newcommand" class="level2">
<h2 class="anchored" data-anchor-id="newcommand">\newcommand</h2>
<p>Now, try to define some abbreviated latex commands for these math expressions. The <a href="https://quarto.org/docs/authoring/markdown-basics.html">Quarto authoring doc</a> says these should work</p>
<blockquote class="blockquote">
<p>For HTML math processed using MathJax (the default) you can use the <code>\def</code>, <code>\newcommand</code>, <code>\renewcommand</code>, <code>\newenvironment</code>, <code>\renewenvironment</code>, and <code>\let</code> commands to create your own macros and environments.</p>
</blockquote>
<div class="sourceCode" id="cb3"><pre class="sourceCode latex code-with-copy"><code class="sourceCode latex"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a><span class="sc">\renewcommand*</span><span class="ss">{</span><span class="sc">\vec</span><span class="ss">}[1]{</span><span class="sc">\mathbf</span><span class="ss">{#1}} </span></span>
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a><span class="sc">\newcommand*</span><span class="ss">{</span><span class="sc">\mat</span><span class="ss">}[1]{</span><span class="sc">\mathbf</span><span class="ss">{#1}} </span></span>
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a><span class="sc">\newcommand</span><span class="ss">{</span><span class="sc">\trans</span><span class="ss">}{^</span><span class="sc">\mathsf</span><span class="ss">{T}} </span></span>
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a><span class="sc">\newcommand*</span><span class="ss">{</span><span class="sc">\diag</span><span class="ss">}[1]{</span><span class="sc">\mathrm</span><span class="ss">{diag}</span><span class="sc">\,</span><span class="ss"> #1}}</span></span>
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a><span class="sc">\newcommand</span><span class="ss">{</span><span class="sc">\sizedmat</span><span class="ss">}[2]{</span><span class="sc">\underset</span><span class="ss">{</span><span class="sc">\mathbf</span><span class="ss">{#1}}{(#2)}}</span></span>
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<!-- % \newcommand{\sizedmat}[2]{\mathord{\mathop{\mat{#1}}\limits_{(#2)}} -->
<p>The docs say to include this in a <code>::: {.hidden}</code> div:</p>
<div class="hidden">
<p><span class="math display">\[
\renewcommand*{\vec}[1]{\mathbf{#1}}
\newcommand*{\mat}[1]{\mathbf{#1}}
\newcommand{\trans}{^\mathsf{T}}
\newcommand*{\diag}[1]{\mathrm{diag}\, #1}}
\newcommand{\sizedmat}[2]{\underset{\mathbf{#1}}{(#2)}}
\]</span></p>
</div>
<p>Then, I try to use them:</p>
<div class="sourceCode" id="cb4"><pre class="sourceCode latex code-with-copy"><code class="sourceCode latex"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\sizedmat</span><span class="ss">{</span><span class="sc">\mat</span><span class="ss">{Y}}{n </span><span class="sc">\times</span><span class="ss"> p}} = </span></span>
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\sizedmat</span><span class="ss">{</span><span class="sc">\mat</span><span class="ss">{X}}{n </span><span class="sc">\times</span><span class="ss"> q}} </span><span class="sc">\,</span><span class="ss"> </span></span>
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\sizedmat</span><span class="ss">{</span><span class="sc">\mat</span><span class="ss">{B}}{q </span><span class="sc">\times</span><span class="ss"> p}} + </span></span>
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\sizedmat</span><span class="ss">{</span><span class="sc">\mat</span><span class="ss">{U}}{n </span><span class="sc">\times</span><span class="ss"> p}} ,</span></span>
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>This doesnât work, perhaps because the <code>\newcommand</code> block wasnât interpreted as equations. (Or, could this be because of the <code>\underset</code> ?)</p>
<p><span class="math display">\[
{\sizedmat{\mat{Y}}{n \times p}} =
{\sizedmat{\mat{X}}{n \times q}} \,
{\sizedmat{\mat{B}}{q \times p}} +
{\sizedmat{\mat{U}}{n \times p}} ,
\]</span></p>
</section>
<section id="other-mathjax-extensions" class="level2">
<h2 class="anchored" data-anchor-id="other-mathjax-extensions">Other <code>mathjax</code> extensions</h2>
<p>Letâs try <a href="https://github.com/andrewheiss/bayesf22.classes.andrewheiss.com">Andrew Heissâ nice equations</a> using the mathjax <code>mathtools</code> extension. This LaTeX defines some colors:</p>
<div class="sourceCode" id="cb5"><pre class="sourceCode latex code-with-copy"><code class="sourceCode latex"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="sc">\require</span><span class="ss">{mathtools}</span></span>
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a><span class="sc">\definecolor</span><span class="ss">{bayesred}{RGB}{147, 30, 24}</span></span>
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a><span class="sc">\definecolor</span><span class="ss">{bayesblue}{RGB}{32, 35, 91}</span></span>
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a><span class="sc">\definecolor</span><span class="ss">{bayesorange}{RGB}{218, 120, 1}</span></span>
<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a><span class="sc">\definecolor</span><span class="ss">{grey}{RGB}{128, 128, 128}</span></span>
<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\color</span><span class="ss">{bayesorange} P (</span><span class="sc">\text</span>{H}<span class="ss"> </span><span class="sc">\mid</span><span class="ss"> </span><span class="sc">\text</span>{E}<span class="ss">)} = </span><span class="sc">\frac</span></span>
<span id="cb5-8"><a href="#cb5-8" aria-hidden="true" tabindex="-1"></a><span class="ss">{{</span><span class="sc">\color</span><span class="ss">{bayesred} P(</span><span class="sc">\text</span>{H}<span class="ss">)} </span><span class="sc">\times</span><span class="ss"> </span></span>
<span id="cb5-9"><a href="#cb5-9" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\color</span><span class="ss">{bayesblue}P(</span><span class="sc">\text</span>{E}<span class="ss"> </span><span class="sc">\mid</span><span class="ss"> </span><span class="sc">\text</span>{H}<span class="ss">)}}</span></span>
<span id="cb5-10"><a href="#cb5-10" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\color</span><span class="ss">{grey} {P(</span><span class="sc">\text</span>{E}<span class="ss">)}}</span></span>
<span id="cb5-11"><a href="#cb5-11" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb5-12"><a href="#cb5-12" aria-hidden="true" tabindex="-1"></a></span>
<span id="cb5-13"><a href="#cb5-13" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="hidden">
<p><span class="math display">\[
\require{mathtools}
\definecolor{bayesred}{RGB}{147, 30, 24}
\definecolor{bayesblue}{RGB}{32, 35, 91}
\definecolor{bayesorange}{RGB}{218, 120, 1}
\definecolor{grey}{RGB}{128, 128, 128}
{\color{bayesorange} P (\text{H} \mid \text{E})} = \frac
{{\color{bayesred} P(\text{H})} \times
{\color{bayesblue}P(\text{E} \mid \text{H})}}
{\color{grey} {P(\text{E})}}
\]</span></p>
</div>
<p>This uses these colors:</p>
<div class="sourceCode" id="cb6"><pre class="sourceCode latex code-with-copy"><code class="sourceCode latex"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\color</span><span class="ss">{grey} </span><span class="sc">\overbracket</span><span class="ss">[0.25pt]{</span><span class="sc">\color</span><span class="ss">{bayesorange} P (</span><span class="sc">\text</span>{Unknown}<span class="ss"> </span><span class="sc">\mid</span><span class="ss"> </span><span class="sc">\text</span>{Data}<span class="ss">)}^{</span><span class="sc">\text</span>{Posterior}<span class="ss">}} = </span><span class="sc">\frac</span></span>
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a><span class="ss">{{</span><span class="sc">\color</span><span class="ss">{grey} </span><span class="sc">\overbracket</span><span class="ss">[0.25pt]{</span><span class="sc">\color</span><span class="ss">{bayesred} P (</span><span class="sc">\text</span>{Unknown}<span class="ss">)}^{</span><span class="sc">\text</span>{Prior}<span class="ss">}} </span><span class="sc">\times</span><span class="ss"> </span></span>
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a><span class="ss">{</span><span class="sc">\color</span><span class="ss">{grey} </span><span class="sc">\overbracket</span><span class="ss">[0.25pt]{</span><span class="sc">\color</span><span class="ss">{bayesblue} P (</span><span class="sc">\text</span>{Data}<span class="ss"> </span><span class="sc">\mid</span><span class="ss"> </span><span class="sc">\text</span>{Unknown}<span class="ss">)}^{</span><span class="sc">\text</span>{Likelihood}<span class="ss">}}}</span></span>
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a><span class="ss">{{</span><span class="sc">\color</span><span class="ss">{grey} </span><span class="sc">\underbracket</span><span class="ss">[0.25pt]{{</span><span class="sc">\color</span><span class="ss">{grey} P(</span><span class="sc">\text</span>{E}<span class="ss">)}}_{</span><span class="sc">\text</span>{Average likelihood}<span class="ss">}}}</span></span>
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a><span class="ss">$$</span></span>
<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<p>The result does not appear nicely in the RStudio editor window, but works fine in the output.</p>
<p><span class="math display">\[
{\color{grey} \overbracket[0.25pt]{\color{bayesorange} P (\text{Unknown} \mid \text{Data})}^{\text{Posterior}}} = \frac
{{\color{grey} \overbracket[0.25pt]{\color{bayesred} P (\text{Unknown})}^{\text{Prior}}} \times
{\color{grey} \overbracket[0.25pt]{\color{bayesblue} P (\text{Data} \mid \text{Unknown})}^{\text{Likelihood}}}}
{{\color{grey} \underbracket[0.25pt]{{\color{grey} P(\text{E})}}_{\text{Average likelihood}}}}
\]</span></p>
</section>

</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!");
    setTimeout(function() {
      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() {
      let href = ref.getAttribute('href');
      try { href = new URL(href).hash; } catch {}
      const id = href.replace(/^#\/?/, "");
      const note = window.document.getElementById(id);
      return note.innerHTML;
    });
  }
  var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
  for (var i=0; i<bibliorefs.length; i++) {
    const ref = bibliorefs[i];
    const cites = ref.parentNode.getAttribute('data-cites').split(' ');
    tippyHover(ref, function() {
      var popup = window.document.createElement('div');
      cites.forEach(function(cite) {
        var citeDiv = window.document.createElement('div');
        citeDiv.classList.add('hanging-indent');
        citeDiv.classList.add('csl-entry');
        var biblioDiv = window.document.getElementById('ref-' + cite);
        if (biblioDiv) {
          citeDiv.innerHTML = biblioDiv.innerHTML;
        }
        popup.appendChild(citeDiv);
      });
      return popup.innerHTML;
    });
  }
});
</script>
</div> <!-- /content -->


</body></html>

## test-newcommand.qmd
---
title: "Quarto: Test LaTeX newcommands in HTML doc"

format:
  html:
    html-math-method: mathjax
#    url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
  pdf:
    documentclass: scrreprt
    include-in-header: latex-commands.tex
---

In a Quarto document, I want to be able to use more extensive math LaTeX features than are
typical for simple equations, using some extensions presumably provided by `mathjax`,
particularly for matrix expressions. (I think, but am not sure, that the latest Quarto uses `mathjax` v 3.2. )

As a simiple example, here I use a straightforward math equation with no special stuff, with `\mathbf{}` used
for matrices and vectors. This works well and the equation appears nicely in the RStudio editor window. The source code is:

```latex
$$\mathbf{y} = \mathbf{X} \; \mathbf{\beta} + \mathbf{u},
\quad\mbox{   with   }\quad
\mathbf{u} \sim \mathcal{N} (0, \sigma^2 \mathbf{I}) ,
$$
```

$$\mathbf{y} = \mathbf{X} \; \mathbf{\beta} + \mathbf{u},
\quad\mbox{   with   }\quad
\mathbf{u} \sim \mathcal{N} (0, \sigma^2 \mathbf{I}) ,
$$

However, in another version, I'd like to show the size of matrices using subscripts.
This also works, but it fails if I try to include an equation number `(eq-mlm)`.

```latex
$$
\mathbf{Y}_{n \times p} =
\mathbf{X}_{n \times q} \, \mathbf{B}_{q \times p} + \mathbf{U}_{n \times p} \:\: ,
$$
```

$$
\mathbf{Y}_{n \times p} =
\mathbf{X}_{n \times q} \, \mathbf{B}_{q \times p} + \mathbf{U}_{n \times p} \:\: ,
$$

## \newcommand

Now, try to define some abbreviated latex commands for these math expressions.
The [Quarto authoring doc](https://quarto.org/docs/authoring/markdown-basics.html) says these should work

> For HTML math processed using MathJax (the default) you can use the `\def`, `\newcommand`, `\renewcommand`, `\newenvironment`, `\renewenvironment`, and `\let` commands to create your own macros and environments.

```latex
$$
\renewcommand*{\vec}[1]{\mathbf{#1}}
\newcommand*{\mat}[1]{\mathbf{#1}}
\newcommand{\trans}{^\mathsf{T}}
\newcommand*{\diag}[1]{\mathrm{diag}\, #1}}
\newcommand{\sizedmat}[2]{\underset{\mathbf{#1}}{(#2)}}
$$
```
<!-- % \newcommand{\sizedmat}[2]{\mathord{\mathop{\mat{#1}}\limits_{(#2)}} -->

The docs say to include this in a `::: {.hidden}` div:

::: {.hidden}
$$
\renewcommand*{\vec}[1]{\mathbf{#1}}
\newcommand*{\mat}[1]{\mathbf{#1}}
\newcommand{\trans}{^\mathsf{T}}
\newcommand*{\diag}[1]{\mathrm{diag}\, #1}}
\newcommand{\sizedmat}[2]{\underset{\mathbf{#1}}{(#2)}}
$$
:::

Then, I try to use them:


```latex
$$
{\sizedmat{\mat{Y}}{n \times p}} =
{\sizedmat{\mat{X}}{n \times q}} \,
{\sizedmat{\mat{B}}{q \times p}} +
{\sizedmat{\mat{U}}{n \times p}} ,
$$
```

This doesn't work, perhaps because the `\newcommand` block wasn't interpreted as equations.
(Or, could this be because of the `\underset` ?)

$$
{\sizedmat{\mat{Y}}{n \times p}} =
{\sizedmat{\mat{X}}{n \times q}} \,
{\sizedmat{\mat{B}}{q \times p}} +
{\sizedmat{\mat{U}}{n \times p}} ,
$$

## Other `mathjax` extensions

Let's try [Andrew Heiss' nice equations](https://github.com/andrewheiss/bayesf22.classes.andrewheiss.com)
using the mathjax `mathtools` extension.  This LaTeX defines some colors:

```latex
$$
\require{mathtools}
\definecolor{bayesred}{RGB}{147, 30, 24}
\definecolor{bayesblue}{RGB}{32, 35, 91}
\definecolor{bayesorange}{RGB}{218, 120, 1}
\definecolor{grey}{RGB}{128, 128, 128}
{\color{bayesorange} P (\text{H} \mid \text{E})} = \frac
{{\color{bayesred} P(\text{H})} \times
{\color{bayesblue}P(\text{E} \mid \text{H})}}
{\color{grey} {P(\text{E})}}
$$

```
::: {.hidden}

$$
\require{mathtools}
\definecolor{bayesred}{RGB}{147, 30, 24}
\definecolor{bayesblue}{RGB}{32, 35, 91}
\definecolor{bayesorange}{RGB}{218, 120, 1}
\definecolor{grey}{RGB}{128, 128, 128}
{\color{bayesorange} P (\text{H} \mid \text{E})} = \frac
{{\color{bayesred} P(\text{H})} \times
{\color{bayesblue}P(\text{E} \mid \text{H})}}
{\color{grey} {P(\text{E})}}
$$
:::

This uses these colors:

```latex
$$
{\color{grey} \overbracket[0.25pt]{\color{bayesorange} P (\text{Unknown} \mid \text{Data})}^{\text{Posterior}}} = \frac
{{\color{grey} \overbracket[0.25pt]{\color{bayesred} P (\text{Unknown})}^{\text{Prior}}} \times
{\color{grey} \overbracket[0.25pt]{\color{bayesblue} P (\text{Data} \mid \text{Unknown})}^{\text{Likelihood}}}}
{{\color{grey} \underbracket[0.25pt]{{\color{grey} P(\text{E})}}_{\text{Average likelihood}}}}
$$
```

The result does not appear nicely in the RStudio editor window, but works fine in the output.
$$
{\color{grey} \overbracket[0.25pt]{\color{bayesorange} P (\text{Unknown} \mid \text{Data})}^{\text{Posterior}}} = \frac
{{\color{grey} \overbracket[0.25pt]{\color{bayesred} P (\text{Unknown})}^{\text{Prior}}} \times
{\color{grey} \overbracket[0.25pt]{\color{bayesblue} P (\text{Data} \mid \text{Unknown})}^{\text{Likelihood}}}}
{{\color{grey} \underbracket[0.25pt]{{\color{grey} P(\text{E})}}_{\text{Average likelihood}}}}
$$
	---
	title: "Quarto: Test LaTeX newcommands in HTML doc"

	format:
	html:
	html-math-method: mathjax
	# url: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
	pdf:
	documentclass: scrreprt
	include-in-header: latex-commands.tex
	---

	In a Quarto document, I want to be able to use more extensive math LaTeX features than are
	typical for simple equations, using some extensions presumably provided by `mathjax`,
	particularly for matrix expressions. (I think, but am not sure, that the latest Quarto uses `mathjax` v 3.2. )

	As a simiple example, here I use a straightforward math equation with no special stuff, with `\mathbf{}` used
	for matrices and vectors. This works well and the equation appears nicely in the RStudio editor window. The source code is:

	```latex
	$$\mathbf{y} = \mathbf{X} \; \mathbf{\beta} + \mathbf{u},
	\quad\mbox{ with }\quad
	\mathbf{u} \sim \mathcal{N} (0, \sigma^2 \mathbf{I}) ,
	$$
	```

	$$\mathbf{y} = \mathbf{X} \; \mathbf{\beta} + \mathbf{u},
	\quad\mbox{ with }\quad
	\mathbf{u} \sim \mathcal{N} (0, \sigma^2 \mathbf{I}) ,
	$$

	However, in another version, I'd like to show the size of matrices using subscripts.
	This also works, but it fails if I try to include an equation number `(eq-mlm)`.

	```latex
	$$
	\mathbf{Y}_{n \times p} =
	\mathbf{X}_{n \times q} \, \mathbf{B}_{q \times p} + \mathbf{U}_{n \times p} \:\: ,
	$$
	```

	$$
	\mathbf{Y}_{n \times p} =
	\mathbf{X}_{n \times q} \, \mathbf{B}_{q \times p} + \mathbf{U}_{n \times p} \:\: ,
	$$

	## \newcommand

	Now, try to define some abbreviated latex commands for these math expressions.
	The [Quarto authoring doc](https://quarto.org/docs/authoring/markdown-basics.html) says these should work

	> For HTML math processed using MathJax (the default) you can use the `\def`, `\newcommand`, `\renewcommand`, `\newenvironment`, `\renewenvironment`, and `\let` commands to create your own macros and environments.

	```latex
	$$
	\renewcommand*{\vec}[1]{\mathbf{#1}}
	\newcommand*{\mat}[1]{\mathbf{#1}}
	\newcommand{\trans}{^\mathsf{T}}
	\newcommand*{\diag}[1]{\mathrm{diag}\, #1}}
	\newcommand{\sizedmat}[2]{\underset{\mathbf{#1}}{(#2)}}
	$$
	```
	<!-- % \newcommand{\sizedmat}[2]{\mathord{\mathop{\mat{#1}}\limits_{(#2)}} -->

	The docs say to include this in a `::: {.hidden}` div:

	::: {.hidden}
	$$
	\renewcommand*{\vec}[1]{\mathbf{#1}}
	\newcommand*{\mat}[1]{\mathbf{#1}}
	\newcommand{\trans}{^\mathsf{T}}
	\newcommand*{\diag}[1]{\mathrm{diag}\, #1}}
	\newcommand{\sizedmat}[2]{\underset{\mathbf{#1}}{(#2)}}
	$$
	:::

	Then, I try to use them:


	```latex
	$$
	{\sizedmat{\mat{Y}}{n \times p}} =
	{\sizedmat{\mat{X}}{n \times q}} \,
	{\sizedmat{\mat{B}}{q \times p}} +
	{\sizedmat{\mat{U}}{n \times p}} ,
	$$
	```

	This doesn't work, perhaps because the `\newcommand` block wasn't interpreted as equations.
	(Or, could this be because of the `\underset` ?)

	$$
	{\sizedmat{\mat{Y}}{n \times p}} =
	{\sizedmat{\mat{X}}{n \times q}} \,
	{\sizedmat{\mat{B}}{q \times p}} +
	{\sizedmat{\mat{U}}{n \times p}} ,
	$$

	## Other `mathjax` extensions

	Let's try [Andrew Heiss' nice equations](https://github.com/andrewheiss/bayesf22.classes.andrewheiss.com)
	using the mathjax `mathtools` extension. This LaTeX defines some colors:

	```latex
	$$
	\require{mathtools}
	\definecolor{bayesred}{RGB}{147, 30, 24}
	\definecolor{bayesblue}{RGB}{32, 35, 91}
	\definecolor{bayesorange}{RGB}{218, 120, 1}
	\definecolor{grey}{RGB}{128, 128, 128}
	{\color{bayesorange} P (\text{H} \mid \text{E})} = \frac
	{{\color{bayesred} P(\text{H})} \times
	{\color{bayesblue}P(\text{E} \mid \text{H})}}
	{\color{grey} {P(\text{E})}}
	$$

	```
	::: {.hidden}

	$$
	\require{mathtools}
	\definecolor{bayesred}{RGB}{147, 30, 24}
	\definecolor{bayesblue}{RGB}{32, 35, 91}
	\definecolor{bayesorange}{RGB}{218, 120, 1}
	\definecolor{grey}{RGB}{128, 128, 128}
	{\color{bayesorange} P (\text{H} \mid \text{E})} = \frac
	{{\color{bayesred} P(\text{H})} \times
	{\color{bayesblue}P(\text{E} \mid \text{H})}}
	{\color{grey} {P(\text{E})}}
	$$
	:::

	This uses these colors:

	```latex
	$$
	{\color{grey} \overbracket[0.25pt]{\color{bayesorange} P (\text{Unknown} \mid \text{Data})}^{\text{Posterior}}} = \frac
	{{\color{grey} \overbracket[0.25pt]{\color{bayesred} P (\text{Unknown})}^{\text{Prior}}} \times
	{\color{grey} \overbracket[0.25pt]{\color{bayesblue} P (\text{Data} \mid \text{Unknown})}^{\text{Likelihood}}}}
	{{\color{grey} \underbracket[0.25pt]{{\color{grey} P(\text{E})}}_{\text{Average likelihood}}}}
	$$
	```

	The result does not appear nicely in the RStudio editor window, but works fine in the output.
	$$
	{\color{grey} \overbracket[0.25pt]{\color{bayesorange} P (\text{Unknown} \mid \text{Data})}^{\text{Posterior}}} = \frac
	{{\color{grey} \overbracket[0.25pt]{\color{bayesred} P (\text{Unknown})}^{\text{Prior}}} \times
	{\color{grey} \overbracket[0.25pt]{\color{bayesblue} P (\text{Data} \mid \text{Unknown})}^{\text{Likelihood}}}}
	{{\color{grey} \underbracket[0.25pt]{{\color{grey} P(\text{E})}}_{\text{Average likelihood}}}}
	$$