允许绘图在 rmarkdown html 中突出块文本

Question

我正在准备一些使用rmarkdown 的html 页面，用于在线发布。在显示情节时，我想利用更多典型计算机显示器上可用的宽度（这是我预期目标观众查看我的页面的方式）。 knitr 默认情况下似乎仅在常规缩放时使用大约 900 像素。

我在this thread 中发现了一些 css，它可以使整个“画布”更大，这很有帮助。但是，这也会增加我不想要的所有内容的宽度，包括文本、块回声等。我想要的是让我的数字“悬垂”其他元素的宽度。增加fig.width 和out.width 并不能做到这一点；数字将简单地缩小以适应其他元素使用的相同范围，从而导致更小的字体大小等：

<style type="text/css">
.main-container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
</style>

```{r out.width = "150%", fig.width = 12, fig.height = 3, device = "svg", fig.align='center'}
plot(pressure)
```

这是我所追求的那种东西的模型，在 Paint 中缝合在一起：

Answer 1

正如您所意识到的，您不应该增加.main-container 的宽度，而是增加图像的宽度。以下是实现它的一种方法：

---
title: "R Markdown Full-width Figures"
output: html_document
---

```{r out.extra='style="max-width:none; width:100vw; margin-left:calc(50% - 50vw);"', fig.width = 12, fig.height = 3, device = "svg"}
par(mar = c(4, 4.5, 1, .5))
plot(pressure)
```

首先，您需要删除max-width: none; 的默认max-width 约束（由rmarkdown 施加）。然后将图像的宽度设置为100vw，即窗口的全宽。此时，您的图像在.main-container 内部仍然是左对齐的，即它的左侧与正文的其余元素对齐，因此您需要将图像向左移动，使其接触到左边距窗口，这就是margin-left: calc(50% - 50vw) 在上面所做的。你可以在一张纸上画一个方框来理解它。基本上，margin-left: 50% 意味着图像将首先向右移动其容器宽度的一半（即.main-container）。这意味着它的左侧位于容器的中心。由于容器以页面为中心，您需要将图像向左移动50vw（即窗口宽度的一半）。向左移动意味着给它一个负的左边距，因此-50vw。 calc() 函数动态计算实际像素数，因此您不必假设容器的宽度是固定的。

一旦你理解了margin-left这个技巧，你就可以使用其他可能的宽度，例如width: 90vw; margin-left: calc(50% - 45vw)，它会给你一个宽度为90vw并在页面上居中的图像：

如果您不想内联 <img> 上的 CSS，您可以将代码块包装在带有类名的 fenced Div 中，这样您就可以重用为该类定义的 CSS。这是一个例子：

---
title: "R Markdown Full-width Figures"
output: html_document
---

```{css, echo=FALSE}
.fullwidth img {
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
```

## One plot

::: {.fullwidth}
```{r, fig.width = 12, fig.height = 3, device = "svg"}
par(mar = c(4, 4.5, 1, .5))
plot(pressure)
```
:::

## Another plot

::: {.fullwidth}
```{r, fig.width = 12, fig.height = 5, device = "svg"}
par(mar = c(4, 4.5, 1, .5))
boxplot(mpg ~ gear, data = mtcars, horizontal = TRUE)
```
:::