Created
August 15, 2022 18:23
Revisions
-
friendly created this gist
Aug 15, 2022 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,333 @@ <!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> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,151 @@ --- 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}}}} $$