Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mathjax is not working properly with kableExtra html format in Quarto #746

Open
shafayetShafee opened this issue Apr 16, 2023 · 5 comments

Comments

@shafayetShafee
Copy link

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,


image


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)
```

image


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

@cderv
Copy link

cderv commented May 6, 2024

Hi 👋 , Quarto developer here.

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

Let me give summary of the context here:

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
Copy link
Collaborator

dmurdoch commented May 6, 2024

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
Copy link
Collaborator

dmurdoch commented May 6, 2024

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
Copy link

cderv commented May 6, 2024

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

I am getting this
image

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
Copy link
Collaborator

dmurdoch commented May 6, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants