Demonstration

p5

w and s move the left paddle, o and l move the right paddle.

R Markdown

This post is written as a .Rmd file. Regular R code works.

Test:

knitr::include_url("/slides/dataintro19")

However, a number of workarounds are necessary to fix the dependency problems between the hugo academic theme, R markdown, DT, plotly and mermaid (the latter two being html widgets).

Tests

DT

Getting DT to work properly requires the steps performed to close this issue: https://github.com/dcossyleon/blogdown_desiree/issues/1

DT::datatable(head(iris))

I still need to make it work properly with the dark mode of this theme.

Plotly

A regular ggplot renders just fine. But a plotly graph of said ggplot object Will not be displayed until you set math = false in the configuration file params.toml. This is due to a clash of mathJax versions in plotly, rmarkdown and the hugo academic theme.

print("test")
## [1] "test"
plt <- ggplot2::ggplot(ggplot2::mpg, ggplot2::aes(displ, cty)) +
  ggplot2::geom_point()
plotly::ggplotly(plt)

However, while this options brings back plotly, it also disables math rendering for this document on the site.

Bringing back the Math

We can somewhat hackily circumvent this by including our own mathJax in the sites JS dependencies. To do this, leave academics math option disabled (=false), open up layouts/partials/site_js.html (you should have this from the DT fix linked to in the first section of this post) and add these lines near the top:

{{/* We load our own mathJax here, some html widgets seem to need it loaded first */}}
<script src="//yihui.org/js/math-code.js"></script>
<script async
  src="https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

This solution is inspired by https://bookdown.org/yihui/blogdown/templates.html. The CDN used here is the link that bookdown html books use and I found it in the html source of a book I have on my website while searching a files for mathJax.

\[sd = \sqrt{\frac{\sum_{i=0}^{n}{(x_i-\bar x)^2}}{(n-1)} }\]

diagrammeR

The current version of mermaid has some unfortunate css scoping issues that clash with R markdown documents in general. To fix those, go to your R library path and find the DiagrammeR package. Then modify $HOME/R/x86_64-pc-linux-gnu-library/3.6/DiagrammeR/htmlwidgets/lib/mermaid/dist/mermaid.css

and replace every .section with .DiagrammeR .section.

Restart R to reload the library.

DiagrammeR::mermaid(
"
graph TB
A-->B
A-->C
C-->E
B-->D
C-->D
D-->F
E-->F
")

Before this fix, mermaid.css would basically grey out your whole page.

I do love the academic theme, but in the long run I might consider switching to a more lightweight theme, as most features introduced by academic where already covered by Rmarkdown / blogdown and will inevitably lead to clashes.

Biochemist / Bioinformatician

Biochemistry Master student at Heidelberg University