css - 如何在 Rmarkdown 演示文稿中设置定理环境

Question

我是 Rmarkdown 的新手，并计划使用 ioslides/slidy/xaringan 来做我的演示。

我以前用投影仪做演示。在投影仪中，我有专为数学定理设计的定理环境。我希望能够在 ioslides/slidy/xaringan 中使用这种格式。我知道我可以使用 $$...$$ 来包含乳胶代码并可以显示方程式。但是，这还不足以满足我的需求。

我也知道在 bookdown 中可以有定理环境。但我不知道如何在 ioslides/slidy/xaringan 输出格式中做到这一点。

Answer 1

这对于评论中的讨论来说太长了，所以这里有一个答案。以下定义了一些受上述博客文章中的想法启发的样式：

样式.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;
}

要在 rmarkdown 演示文稿中使用这些样式，您可以通过 YAML 标头包含它们。对于 ioslides，它的工作原理是这样的（对于 slidy 和 xaringan 类似地工作）：

ioslides.Rmd（请注意，这要求 styles.css 与 ioslides.Rmd 位于同一文件夹中）

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

您现在可以使用<div>类的元素创建定理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>

编辑：哥本哈根风格

准确地重新创建投影仪样式很麻烦，但通过一些 CSS 技巧你可以接近。这是一个看起来类似于 的示例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;
}