Math rendering with Quarto and html

[kelliemac]

Prework

• Read and agree to the code of conduct and contributing guidelines.
• If there is already a relevant issue, whether open or closed, comment on the existing thread instead of posting a new issue.

Description

Math equations in gt headings and subheading are not displaying properly when rendering qmd files to html.

Reproducible example

The following is in a .qmd file:

---
output: html
html-table-processing: none
---

```{r}
library(gt)
library(tidyverse)

head(mtcars) |>
  gt() |>
  tab_header(md('**mtcars** dataset'),
             md('Testing a math formula: $e^{i \\pi}+1 = 0$'))
```

Expected result

The math formula $e^{i \pi}+1 = 0$ should display nicely (LaTeX-style) in the table subheading. When running the code interactively in RStudio everything looks good in the viewer, but when rendering the .qmd file to .html it does not work.

Screenshot from RStudio viewer:

Screenshot from rendered html:

Session info

R version 4.4.0 (2024-04-24)
Platform: aarch64-apple-darwin20
Running under: macOS Sonoma 14.5

Matrix products: default
BLAS:   /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib 
LAPACK: /Library/Frameworks/R.framework/Versions/4.4-arm64/Resources/lib/libRlapack.dylib;  LAPACK version 3.12.0

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

time zone: America/Los_Angeles
tzcode source: internal

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
 [1] lubridate_1.9.3 forcats_1.0.0   stringr_1.5.1   dplyr_1.1.4    
 [5] purrr_1.0.2     readr_2.1.5     tidyr_1.3.1     tibble_3.2.1   
 [9] ggplot2_3.5.1   tidyverse_2.0.0 gt_0.11.0      

loaded via a namespace (and not attached):
 [1] katex_1.4.1       jsonlite_1.8.8    gtable_0.3.5     
 [4] compiler_4.4.0    Rcpp_1.0.13       tidyselect_1.2.1 
 [7] xml2_1.3.6        scales_1.3.0      fastmap_1.2.0    
[10] R6_2.5.1          commonmark_1.9.1  generics_0.1.3   
[13] curl_5.2.1        knitr_1.48        munsell_0.5.1    
[16] pillar_1.9.0      tzdb_0.4.0        rlang_1.1.4      
[19] V8_4.4.2          utf8_1.2.4        stringi_1.8.4    
[22] xfun_0.46         sass_0.4.9        timechange_0.3.0 
[25] cli_3.6.3         withr_3.0.1       magrittr_2.0.3   
[28] digest_0.6.36     grid_4.4.0        rstudioapi_0.16.0
[31] markdown_1.13     hms_1.1.3         lifecycle_1.0.4  
[34] vctrs_0.6.5       glue_1.7.0        fansi_1.0.6      
[37] colorspace_2.1-1  tools_4.4.0       pkgconfig_2.0.3  
[40] htmltools_0.5.8.1

My Quarto version is 1.5.56 (from running quarto --version in the Terminal) and my RStudio version is 2024.04.0+735.

[olivroy]

Thanks for the report!

It works correctly for me if I remove html-table-disable-processing: none from the front matter

https://quarto.org/docs/authoring/tables.html#disabling-quarto-table-processing

---
format: html
---

```{r}
library(gt)
library(tidyverse)

head(mtcars) |>
  gt() |>
  tab_header(md('**mtcars** dataset'),
             md('Testing a math formula: $e^{i \\pi}+1 = 0$'))
```

Since you may need to disable processing for some tables, but not for others, I suggest you use it as a chunk option.

Or tab_options(quarto.disable_processing = TRUE)

i.e.

---
format: html
---

```{r}
library(gt)
library(tidyverse)

head(mtcars) |>
  gt() |>
  tab_header(md('**mtcars** dataset'),
             md('Testing a math formula: $e^{i \\pi}+1 = 0$'))
```

```{r}
#| html-table-processing: none
gt(mtcars)
```

[cderv]

More context on this.

In this example:

---
output: html
html-table-processing: none
keep-md: true
---

```{r}
library(gt)
library(tidyverse)

head(mtcars) |>
  gt() |>
  tab_header(md('**mtcars** dataset'),
             md('Testing a math formula: $e^{i \\pi}+1 = 0$'))
```

The equation is not showing correctly because I believe the Math libraries are not correctly inserted / loaded in the output document.

In this case, gt is handling the math (as explained https://gt.rstudio.com/reference/fmt_markdown.html?q=math#examples) but then the JS libraries are not passed through as HTML dependencies probably. It means gt rely on quarto to load the right math library.

This will happens if math are used elsewhere in the document (processed by Quarto)

For example

---
output: html
html-table-processing: none
keep-md: true
---

```{r}
library(gt)
library(tidyverse)

head(mtcars) |>
  gt() |>
  tab_header(md('**mtcars** dataset'),
             md('Testing a math formula: $e^{i \\pi}+1 = 0$'))
```

$1 + 1$

Will lead to table being ok

Maybe this is an "accident" (@rich-iannone are you using katex or mathjax for math rendering ? )

Regarding html-table-processing: none being removed, it will work because in that case

• gt will mark the content of md() as being something to be handled by Quarto rendering directly;
• Quarto will see the maths and so load the correct libraries.

Honestly, html-table-processing: none means that Quarto won't do a lot of processing of tables we are meant to give nice output. So opting out of this processing means that some things will need to be handled manually. (like math handling).

@rich-iannone maybe this can be improve by setting right HTML dependencies through knitr. This is using katex right ?

[rich-iannone]

@cderv you are right in that we are using the katex package to perform math rendering. We can definitely improve this in more situations!

[cderv]

we are using the katex package to perform math rendering

So it means your are doing server side rendering (I mean in R directly), and then it requires some dependencies to be available ?

I wonder why it is not working - my guess is html dependencies missing. Are you passing them through knitr ?