Mathjax is not working properly with kableExtra html format in Quarto

[shafayetShafee]

Consider the following reprex to understand the issue,

---
title: "kableExtra"
format: html
execute: 
  echo: false
---

## Quarto

```{r}
library(kableExtra) 

tbl1 <- data.frame(
     var = c("$a$", "$b$", "$c$"),
     val = c(1, 2, 3)
   )
```

```{r}
kbl(tbl1, format="html") %>%
  kable_classic(full_width = F) %>%
    kable_styling(font_size = 24) %>%
      row_spec(2, color = "lightgray", background = "darkred")

```

which generates the following table,

---

---

As you can see, the a, b, c wrapped within $...$ is not rendered correctly by mathjax.

But strange enough, If I save the kbl object in a variable and then cat it, everything works as intended.

---
title: "kableExtra"
format: html
execute: 
  echo: false
---

## Quarto

```{r}
library(kableExtra) 

tbl1 <- data.frame(
     var = c("$a$", "$b$", "$c$"),
     val = c(1, 2, 3)
   )
```

```{r}
#| results: asis
tab <- kbl(tbl1, format="html") %>%
  kable_classic(full_width = F) %>%
    kable_styling(font_size = 24) %>%
      row_spec(2, color = "lightgray", background = "darkred")

cat(tab)
```

---

---

Would you kindly help me to understand what is going on here 😅🙏?

[cderv]

Hi 👋 , Quarto developer here.

We have some explanation about this in this thread opened in Quarto

• Math formatting does not work in styled KableExtra tables quarto-dev/quarto-cli#555

Let me give summary of the context here:

• One of Quarto feature is the ability to parse HTML table (https://quarto.org/docs/authoring/tables.html#html-tables)
• Quarto will parse any HTML Table inside a raw block ```{=html} - This means table content can be HTML only
• Quarto offers an escape hatch for this by allowing to base unparsed Markdown content to Quarto using data-qmd or data-qmd-base64 attributes on span and divs. This explained in same paragraph at https://quarto.org/docs/authoring/tables.html#html-tables

This way of working for Quarto is explaining what is seen here:

As you can see, the a, b, c wrapped within $...$ is not rendered correctly by mathjax.

In this case, they are not parsed because they are included in a HTML table inside raw block, and so nor Quarto nor Pandoc will see this as regulat content, and not parse it a Math elements to be rendered as markdown.

To be clear, this first example would not work in R Markdown either for a HTML table inside a raw block which would contain math as markdown.

But strange enough, If I save the kbl object in a variable and then cat it, everything works as intended.

When doing this, the content generating as results of the knitr cell won't be inside a HTML raw block. So Quarto won't parse it, and only Pandoc Markdown parsing is done. Pandoc can parse Markdown in HTML when some extensions of Pandoc are activated. It won't see the whole table as HTML but somes pieces as Raw HTML inlines, and other Markdown content.

Anyhow, you can set keep-md: true in YAML option to see the intermediated markdown generated

Would you kindly help me to understand what is going on here 😅🙏?

I really hope this helps understand the behavior.

Let's discuss possible solution now.

The best way would be for kableExtra to have a mechanism to allow to format some content in cell as Markdown to be processed by Quarto. This means passing the content in the mentioned attributes.

gt does through it md() helper, that gets specific processing in Quarto.

Here is an example to make the initial one shared above works

---
title: "kableExtra"
format: html
execute: 
  echo: false
---

## Quarto

```{r}
library(kableExtra) 

tbl1 <- data.frame(
     var = c("$a$", "$b$", "$c$"),
     val = c(1, 2, 3)
   )
make_data_qmd <- function(content) {
  sprintf('<span data-qmd="%s">%s</span>', content, content)
}
tbl1$var <- make_data_qmd(tbl1$var)
```

```{r}
kbl(tbl1, format="html", escape = FALSE) %>%
  kable_classic(full_width = F) %>%
    kable_styling(font_size = 24) %>%
      row_spec(2, color = "lightgray", background = "darkred")

```

it requires escape = FALSE on the whole table to work.

I hope it clarifies what can be done to bring support to this in kableExtra inside Quarto context. I believe what I explained above will apply to other issues too (like fontawesome icons in kableExtra #766).

I am available for further explanation and discussion to help make everything work smoothly!

[dmurdoch]

I'm not a Quarto user, so I'm probably doing something very naive, but when I run your final document through "render" in RStudio, I don't get final output, I just see something that looks like intermediate output:

---
title: "kableExtra"
format: html
execute: 
  echo: false
---

## Quarto

::: {.cell}

```{.r .cell-code}
library(kableExtra) 

... and so on. Did something get messed up in what you posted?

More to the point: would an option to kableExtra::cell_spec() to do what your make_data_qmd() function does be the solution here, or would you like this to happen in some other function?

[dmurdoch]

Found the naive problem: somehow I kept the 4 backtick fences around the code. But now that I've removed those, I'm seeing the $a$ code instead of the MathJax output.

[cderv]

My example should work with latest Quarto. I am running it with 1.4.554

I am getting this

would an option to kableExtra::cell_spec() to do what your make_data_qmd() function does be the solution here, or would you like this to happen in some other function?

I don't know enough about kableExtra API to know what would be the best to do for the user experience with the package

I am thinking of adding some helpers for this anyway in quarto R package to help creating string with this feature. Could be wrapper as make_data_qmd() that others could use...

Or now that I am challenged on the idea (thanks !) maybe there could be some generic way to mark some string in R to be transformed to this attributes syntax by knitr itself. 🤔

Really I am opened to any suggestion to make the R user experience better regarding this feature from Quarto.

[dmurdoch]

Okay, I had an old Quarto on my path, and RStudio was using it. It's gone now and things are working.

I think the ideal user experience would be to have this happen automatically in kbl() if it detected it was running in Quarto. Is there an easy test for that? Then we'd need to test each cell to see if it looked like MathJax input, and apply the wrapper. I'm not sure what that test would be, but it's probably not too hard.