向RMarkdown HTML文档添加自定义CSS标签

Question

我有一个RMarkdown文档，输出的HTML与下面的示例相同。我要在哪里添加内容以将唯一的CSS id或类应用于每个图形输出？

---
title: "RMarkdown"
author: "Me"
date: "Friday, March 27, 2015"
output:
  html_document:
    theme: null
    css: style.css
---

```{r plot1, echo=FALSE, warning=FALSE, message=FALSE}
library(ggplot2)
x <- ggplot(some_r_code)
print(x)
```

```{r plot2, echo=FALSE, warning=FALSE, message=FALSE}
y <- ggplot(some_more_r_code)
print(y)
```

我已经阅读了 http://rmarkdown.rstudio.com/html_document_format.html 的信息页面，这在一定程度上回答了我的问题，但并没有让我彻底理解。我在评论区提出了一个类似的问题，并希望能得到回答。

谢谢！

- Eugene Brown

---

这是一个很好的问题，你找到解决方案了吗？ - Max Wen

我没有，但是有一些解决方法可以使用。每个代码块都在 p 标签中呈现，并且每个图都在这些段落内的 img 标签中呈现。因此，您可以使用以下 CSS 访问第一个： p:nth-of-type(1) img { 在这里输入 CSS... } 并使用以下 CSS 访问第二个 p:nth-of-type(2) img { 在这里输入 CSS... }。希望这能帮上忙！ - Eugene Brown

Answer 1

你可以告诉 knitr（在幕后使用）用 results="asis" 将代码块的输出直接嵌入到HTML中。在代码块内，你可以使用 cat 函数来编写包括CSS定义的样式标签：

```{r results="asis"}
cat("
<style>
h1 {
   color: red;
}
</style>
")
```

详细内容请参见http://yihui.name/knitr/options/#chunk_options。

- Holger Brandl

---

非常有用，适用于self_contained = true。 - Miguel Vazq

Answer 2

在RMarkdown中声明自定义css样式

• 将css样式添加在RMarkdown的正文部分（即非R代码区域）的<style>和</style>标签之间，如下所示：

<style>
.pad {
    padding-top: 200px; 
}
</style>

# This heading will be padded {.pad}

• 另一种选择是在yaml中声明css: "style.css"，并将样式存储在同一个目录中的单独文件（样式表）中
• 或者可以通过R代码生成和应用css（这里有一个非常好的例子here）

- stevec

Answer 3

在具有开发人员工具选项的浏览器中打开生成的HTML，并查看生成的HTML。然后将样式应用于适当的标签/类。例如，将以下内容放入style.css，编织文件，您应该在图形上看到红色边框：

img {
  background-color: red;
  padding: 2px;
  border: 1px solid red;
  border-radius: 3px;
  margin: 0 5px;
  max-width: 100%;
}

- hrbrmstr

---

我知道我可以更改生成的HTML文件，但我想要一个编程解决方案，避免手动应用标签，就像你建议的那样。我还想单独为图表设置样式，访问<img>标签无法实现这一点。 - Eugene Brown