CSS missing on embedded slides with `embed_xaringan()`

[jhelvy]

I'm hesitant to write this because I feel like I'm missing something really basic, but every time I embed slides using xaringanExtra::embed_xaringan() the embedded slides are missing all the CSS. For example, I tried embedding these slides using this code below, but it shows up without the CSS:

---
title: "Testing"
output: html_document
---

```{r slides, echo=FALSE}
xaringanExtra::embed_xaringan(
  url = "https://jhelvy.github.io/xaringanBuilder/reference/figures/slides.html")

Here is what the slides look like when embedded:

![no_css](https://user-images.githubusercontent.com/9012994/114087597-1460f100-9882-11eb-8563-448ce1f0b153.png)

I've done this in the past and had no trouble with CSS, so I'm wondering if something changed in xaringan, rmarkdown, or xaringanExtra?  

[gadenbuie]

That's interesting... does anything show up in the developer console? I'd expect you'd see at least an error about assets that can't be accessed.

[jhelvy]

Is this what you mean? I didn't see anything about assets not being accessed.

processing file: index.Rmd
  |...................................                                   |  50%
  ordinary text without R code

  |......................................................................| 100%
label: slides (with options) 
List of 1
 $ echo: logi FALSE

output file: index.knit.md

/Applications/RStudio.app/Contents/MacOS/pandoc/pandoc +RTS -K512m -RTS index.knit.md --to html4 --from markdown+autolink_bare_uris+tex_math_single_backslash --output index.html --lua-filter /Library/Frameworks/R.framework/Versions/4.0/Resources/library/rmarkdown/rmarkdown/lua/pagebreak.lua --lua-filter /Library/Frameworks/R.framework/Versions/4.0/Resources/library/rmarkdown/rmarkdown/lua/latex-div.lua --self-contained --variable bs3=TRUE --standalone --section-divs --template /Library/Frameworks/R.framework/Versions/4.0/Resources/library/rmarkdown/rmd/h/default.html --no-highlight --variable highlightjs=1 --variable theme=bootstrap --include-in-header /var/folders/76/nlsnjw657tjbphtcthmwvkqm0000gq/T//RtmpDoxajI/rmarkdown-str433d65823712.html --mathjax --variable 'mathjax-url:https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML' 

Output created: index.html

[jhelvy]

Oh wait, did you mean like the Chrome developer console?

[jhelvy]

Alright, even more mysterious is I have no problems with the same file if it's built on my laptop, so it's definitely an issue with my desktop computer settings. I've made sure package versions are the same, so it's not that. My guess is there's some weirdness with pandoc maybe? My laptop RStudio is version 1.3.959, but the desktop is 1.4.1098.

[gadenbuie]

Got it. The issue is that self_contained: true is the default for html_document. pandoc embeds the HTML of the slides but it doesn't embed all the slide's assets and then this somehow creates a cross-origin request issue so not all of the slide assets load.

Try setting self_contained: false:

---
title: "Testing"
output: 
  html_document:
    self_contained: false
---

```{r slides, echo=FALSE}
xaringanExtra::embed_xaringan(
  url = "https://jhelvy.github.io/xaringanBuilder/reference/figures/slides.html")

[jhelvy]

Mystery solved! :pray: