how to set up theorem environment in the Rmarkdown presentation

Question

I am new to Rmarkdown and plan to use ioslides/slidy/xaringan to do my presentation.

I used to use the beamer to do presentations. In the beamer, I have theorem environment which is designed to mathematics theorems. I want to be able to have that kind of format in ioslides/slidy/xaringan. I know I can use $$...$$ to include latex code and can display equation. However, this is not enough to my needs.

I also know in bookdown one can have theorem environment. But I do not know how to do that in the ioslides/slidy/xaringan output format.

Answer 1

This would be too lengthy for a discussion in the comments, so here is an answer. The following defines some styles inspired by the idea in the above-mentioned blog post:

styles.css

.theorem {
  display: block;
  font-style: italic;
  font-size: 24px;
  font-family: "Times New Roman";
  color: black;
}
.theorem::before {
  content: "Theorem. ";
  font-weight: bold;
  font-style: normal;
}
.theorem[text]::before {
  content: "Theorem (" attr(text) ") ";
}
.theorem p {
  display: inline;
}

To use these styles in rmarkdown presentations you can include them via the YAML header. For ioslides it works like this (works analogously for slidy and xaringan):

ioslides.Rmd (Note that this requires styles.css to be in the same folder as ioslides.Rmd)

---
title: "Theorem demo"
output:
  ioslides_presentation:
    css: styles.css
---

You can now create a theorem using a <div> element of the class theorem:

## CLT

<div class="theorem" text='CLT'>
  The CLT states that, as $n$ goes to infinity, the sample average $\bar{X}$
  converges in distribution to $\mathcal{N}(\mu,\sigma^2/n)$.
</div>

EDIT: Copenhagen style

Recreating beamer styles exactly is cumbersome but with a few CSS tricks you can get close. Here is an example that looks similar to theme: copenhagen.

.theorem {
  display: block;
  font-style: italic;
  font-size: 24px;
  font-family: "Times New Roman";
  color: black;
  border-radius: 10px;
  background-color: rgb(222,222,231);
  box-shadow: 5px 10px 8px #888888;
}
.theorem::before {
  content: "Theorem. ";
  font-weight: bold;
  font-style: normal;
  display: inline-block;
  width: -webkit-fill-available;
  color: white;
  border-radius: 10px 10px 0 0;
  padding: 10px 5px 5px 15px;
  background-color: rgb(38, 38, 134);
}
.theorem p {
  padding: 15px 15px 15px 15px;
}