How do I get inline math to render in an html block?

[jbrick55]

Description

I'm having trouble getting inline latex to render when it's included inside an html block. I use the html block for bootstrap show/hide buttons. But even outside of the button, I get the same result if try any {=html} block in a qmd. The $$...$$ will render correctly as block math but the $...$ will not render correctly.

It may be related to this? #8505

---
title: "Reproducible Quarto Document"
format: html
engine: knitr
---

Within a qmd I might add an html block such as this...
```{=html}
I want inline latex here $4/5$

$$4/5$$

```

Basically, I'd like to see if this happens to anyone else. If you have a solution, even better!
[I use Rstudio on a Mac]

[mcanouil]

Why are you using raw HTML block with no HTML in it?

I get inline and display (block) math.

[jbrick55]

Here's an example of how I'm using it inside an html block (but I get the same result without all of the other html)...

```{=html}
<p>
  <button class="btn btn-outline-success collapsed"  type="submit" data-bs-toggle="collapse" data-bs-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3">
    Answer
  </button>
</p>
<div class="collapse" id="collapseExample3">
<div class="card card-body">
Yes, under simple random sampling, the inclusion probability of the $i^{th}$ unit is:

$$\pi_i=n/N$$

Thus,

$$\begin{align}
\hat{\tau}_\pi &= \sum\limits_{i=1}^n \dfrac{y_i}{\pi_i}\\
&= \sum\limits_{i=1}^n \dfrac{y_i}{n} \cdot N\\
&= N \bar{y}\\
\end{align}$$
</div></div>
```

[mcanouil]

but I get the same result without all of the other html

What do you mean?

PS: $$ should be on their own lines.

[jbrick55]

The $i^{th}$ will not render as math. It shows up as is.

[mcanouil]

The thing is that you are putting plain markdown inside an HTML block that you ask to be treated as plain HTML. So you are basically saying, "I don't want Quarto/Pandoc setup for this block".
See for instance the MathJax documentation: https://docs.mathjax.org/en/latest/basic/mathematics.html#tex-and-latex-input

Overall, you should either write completely using HTML or use fenced divs, but definitely not mixing markups together.

Quarto document

HTML

--- title: "Quarto Playground" format: html --- ```{=html} <button class="btn btn-outline-success collapsed" type="submit" data-bs-toggle="collapse" data-bs-target="#collapseExample3" aria-expanded="false" aria-controls="collapseExample3" > Answer </button> ``` :::: {#collapseExample3 .collapse} ::: {.card .card-body} Yes, under simple random sampling, the inclusion probability of the $i^{th}$ unit is: $$ \pi_i=n/N $$ Thus, $$ \begin{align} \hat{\tau}_\pi &= \sum\limits_{i=1}^n \dfrac{y_i}{\pi_i}\\ &= \sum\limits_{i=1}^n \dfrac{y_i}{n} \cdot N\\ &= N \bar{y}\\ \end{align} $$ ::: :::: --- ```{=html} <p> <button class="btn btn-outline-success collapsed" type="submit" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2" > Answer </button> </p> <div class="collapse" id="collapseExample2"> <div class="card card-body"> <p> Yes, under simple random sampling, the inclusion probability of the \(i^{th}\) unit is: </p> $$ \pi_i=n/N $$ <p>Thus,</p> $$ \begin{align} \hat{\tau}_\pi &= \sum\limits_{i=1}^n \dfrac{y_i}{\pi_i}\\ &= \sum\limits_{i=1}^n \dfrac{y_i}{n} \cdot N\\ &= N \bar{y}\\ \end{align} $$ </div></div> ```

[jbrick55]

Got it! Thank you so much. And thanks for showing how to mix the html with the markdown for the show/hide button. I'm still learning!

[mcanouil]

An alternative/suggestion:

Quarto document	HTML
--- format: html --- ::: {.callout collapse="true"} ## Answer Yes, under simple random sampling, the inclusion probability of the $i^{th}$ unit is: $$ \pi_i=n/N $$ Thus, $$ \begin{align} \hat{\tau}_\pi &= \sum\limits_{i=1}^n \dfrac{y_i}{\pi_i}\\ &= \sum\limits_{i=1}^n \dfrac{y_i}{n} \cdot N\\ &= N \bar{y}\\ \end{align} $$ :::	Screen.Recording.2024-06-18.at.00.02.45.mov