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

Question

我正在使用 rmarkdown 准备一些 html 页面，用于在线发布。在显示情节时，我想利用更多典型计算机显示器上可用的宽度(这是我预期目标观众查看我的页面的方式)。 knitr默认情况下，在常规缩放时似乎只使用大约 900 像素。
我在 this thread 中找到了一些 css这可以使总“ Canvas ”更大，这很有帮助。但是，这也会增加我不想要的所有内容的宽度，包括文本、 block 回声等。我想要的是让我的数字“悬垂”其他元素的宽度。增加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约束(由 rmarkdown 施加)由 max-width: none; .然后将图像的宽度设置为 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)
```
:::