Rmarkdown/Quarto Presentation ioslides Math equations

[rpkgarcia]

I am having trouble with math text in the newest version of R using ioslides. Is there a package or something I can download so my math equations look better?

Example code:

---
title: "Untitled"
output: ioslides_presentation
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```


## Slide with Math

$$ \overline{x} = \sum_{i = 1}^\infty x_i$$

Output: Is here

The formatting gets a little off. For example, the overline bar is overlapping the equal sign. I have tried opening on different browsers and machines, my software is up to date.

[yihui]

It looks fine on my screen (macOS):

I guess it's related to RStudio IDE but not rmarkdown. What's your xfun::session_info('rmarkdown')?

You can also try to open the slides in your web browser to see if the math equation is rendered correctly.

[cderv]

Same on windows:

[PeterKDunn]

I am getting similar kids of really poorly rendered maths equations (building HTML using ioslides on my Mac):

I am using rmarkdown 2.25 (the latest) and the latest RStudio and R.

Was anything resolved here?

[cderv]

Can you share reproducible document ? Is the poorly rendered version only inside RStudio IDE preview ? Or also when you open on Chrome browser (or any other) ? Thanks

[PeterKDunn]

Thanks for the reply.

Here is a MWE, based on the default RMarkdown ioslides presentation offered in RStudio (I know the maths is nonsense!):

---
title: "Test"
author: "PKD"
date: "`r Sys.Date()`"
output: ioslides_presentation
---

## R Markdown

Add some maths: $\hat{p} = 3$.
Some displayed:  
\[
   \bar{x} \pm \overbrace{\hat{p}}^{\text{This thing}} = \sqrt{\frac{p \times \alpha}{n}}
\]

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

This is the image in RStudio IDE preview:

Viewed in Vivaldi (Chromium), which is even worse:

In Brave:

In Firefox it looks OK:

In Safari it looks OK:

So maybe a Chromium thing...?

It is driving me insane, so any help appreciated!

Thanks @cderv.

P.

> sessionInfo()
R version 4.3.2 (2023-10-31)
Platform: x86_64-apple-darwin20 (64-bit)
Running under: macOS Ventura 13.6.4

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.3-x86_64/Resources/lib/libRlapack.dylib;  LAPACK version 3.11.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: Australia/Brisbane
tzcode source: internal

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

loaded via a namespace (and not attached):
 [1] vctrs_0.6.5       cli_3.6.2         knitr_1.45        rlang_1.1.3       xfun_0.41         generics_0.1.3    glue_1.7.0        colorspace_2.1-0 
 [9] htmltools_0.5.7   gridExtra_2.3     viridis_0.6.5     rsconnect_1.2.0   scales_1.3.0      fansi_1.0.6       rmarkdown_2.25    grid_4.3.2       
[17] evaluate_0.23     munsell_0.5.0     tibble_3.2.1      fastmap_1.1.1     yaml_2.3.8        lifecycle_1.0.4   compiler_4.3.2    dplyr_1.1.4      
[25] pkgconfig_2.0.3   rstudioapi_0.15.0 digest_0.6.34     viridisLite_0.4.2 R6_2.5.1          tidyselect_1.2.0  utf8_1.2.4        pillar_1.9.0     
[33] magrittr_2.0.3    tools_4.3.2       gtable_0.3.4      ggplot2_3.4.4   

[yihui]

@PeterKDunn I can reproduce your problem on macOS. I don't know how to fix the MathJax rendering, but I just tried KaTeX, which worked fine for me:

---
title: "Test"
author: "PKD"
date: "`r Sys.Date()`"
output:
  ioslides_presentation:
    mathjax: "https://cdn.jsdelivr.net/combine/npm/katex/dist/katex.min.js,npm/katex/dist/contrib/auto-render.min.js,npm/@xiee/utils/js/render-katex.js"
---

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex/dist/katex.min.css" data-external="1">

## R Markdown

Add some maths: $\hat{p} = 3$.
Some displayed:  
\[
   \bar{x} \pm \overbrace{\hat{p}}^{\text{This thing}} = \sqrt{\frac{p \times \alpha}{n}}
\]

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

[PeterKDunn]

Thanks! I had read that only mathjax worked with ioslides (can't find where now). But I should have tried it anyway.

I greatly appreciate your help @yihui and @cderv. (It would be nice, of course, if the default mathjax actually worked... but this is a very easy and serviceable workaround.)

P.

[cderv]

FWIW this is possibly a MacOS issue as I get something like this on Chrome on Windows

Could be an issue with Mathajx directly. Maybe newer mathjax works ok 🤔

output: 
  ioslides_presentation:
    mathjax: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js"

if so we could maybe change the default URL. The current one is using 2.7

[yihui]

Good point. I have forgotten that we are still in MathJax 2.x. I can confirm that v3 works fine on macOS:

---
title: "Test"
author: "PKD"
date: "`r Sys.Date()`"
output:
  ioslides_presentation:
    mathjax: "https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml-full.js"
---

## R Markdown

Add some maths: $\hat{p} = 3$.
Some displayed:  
\[
   \bar{x} \pm \overbrace{\hat{p}}^{\text{This thing}} = \sqrt{\frac{p \times \alpha}{n}}
\]

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.