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

Question

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

以前我用beamer制作演示文稿。在beamer中，我有定理环境，这是为数学定理设计的。我希望在ioslides/slidy/xaringan中也能像那样格式化。我知道可以使用$$...$$来包含latex代码并显示公式。然而，这还不足以满足我的需求。

我也知道在bookdown中可以有定理环境。但我不知道如何在ioslides/slidy/xaringan输出格式中实现它。

- Slm2004

---

ioslides、slidy和xaringan使用MathJax，但不提供像定理这样的amsmath环境。也许这可以帮助：http://drz.ac/2013/01/17/latex-theorem-like-environments-for-the-web/ - Martin C. Arnold

谢谢您的解释。我查看了链接。它使用Octopress。我不想使用那个。我应该把这些HTML CSS代码放在ioslides/slidy/xaringan哪里？ - Slm2004

如果您不介意的话，能否告诉我如何在beamer中使用定理环境？下面的方法似乎不适用于beamer演示文稿，所以我很好奇您使用了哪种有效的方法。谢谢！ - obewanjacobi

Answer 1

这个内容在评论中讨论会太冗长，因此在这里给出答案。以下是一些受上述 博客文章 灵感启发的样式定义：

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;
}

要在rmarkdown演示文稿中使用这些样式，您可以通过YAML头部将它们包含进去。对于ioslides，它的使用方式如下（类似地适用于slidy和xaringan）：

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

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

现在，您可以使用类名为theorem的<div>元素创建一个定理：

## 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>

编辑：哥本哈根风格

完全重建 beamer 样式很麻烦，但是用一些 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;
}

- Martin C. Arnold

---

这太好了。非常感谢！我有一个额外的问题。在Beamer中，定理环境周围有一个框架，一些背景颜色和阴影。您是否知道实现此效果的HTML代码？ - Slm2004

这正是我想要的。谢谢你！！！祝你一切顺利。 - Slm2004

我正在尝试在xaringan中包含style.css。它似乎无法识别定理环境中的latex代码。你知道如何解决这个问题吗？ - Slm2004

我这样做是因为remark.js会干扰MathJax。如果您使用\( ... \)来分隔数学公式，而不是使用$ ... $，它应该可以正常工作。 :) - Martin C. Arnold

我知道了。谢谢！ - Slm2004

宽度仅适用于基于Webkit的浏览器（Chrome和Safari）。为了覆盖Firefox和其他浏览器，我建议使用以下代码： width: 100%; width: -moz-available; width: -webkit-fill-available; width: fill-available; - D G