在 R Markdown 展示中覆盖 reveal.js

Question

我正在尝试在rmarkdown中使用reveal-js制作演示文稿，但是无法覆盖默认的css主题。我想要删除我的绘图图像边框。根据文档说明，应该可以使用以下方法来实现： 但是它没有生效，我猜测这是因为这种覆盖不够具体。但我的问题是，我通常增加具体性的方法也不起作用：

## Slide with Plot
<section class = "no-border">
```{r pressure}
plot(pressure)
```
</section>

这是YAML头部：

title: "Title"
author: "..."
date: '`r paste(format(Sys.Date(),"%d")," ", mymonths[sys.man], ", ",
                format(Sys.Date(),"%Y"), sep = "")`'
output:
  revealjs::revealjs_presentation:
    incremental: true
    includes:
      in_header: slidy_bootstrap_header.html
      css: slidyStandard.css

这是 css-override 文件：

section.no-border > img {
  background:none; 
  border:none; 
  box-shadow:none;
 }

有人知道我哪里做错了吗？

- ErrantBard

---

你确定 YAML 文件中的缩进是正确的吗？你尝试过在 CSS 类中添加 !important 吗？ - Martin Schmelzer

@MartinSchmelzer 我希望如此，虽然没有错误但这并不意味着什么，我也添加了它。编辑：尝试使用!Important，但也没有起作用。 - ErrantBard

为了完整性，您还可以添加 .no-border 的 CSS 样式 :) - Martin Schmelzer

Answer 1

我意识到在我的YAML头中，我将自定义CSS放错了位置。因此，它没有起作用。

下面是带有自定义CSS的可重现代码:

---
title: "Untitled"
output: 
  revealjs::revealjs_presentation:
    css: custom2.css
---

## R Markdown

This is an R Markdown presentation. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see <http://rmarkdown.rstudio.com>.

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document.

## Slide with Bullets

- Bullet 1
- Bullet 2
- Bullet 3

## Slide with R Code and Output

```{r}
summary(cars)
```

## Slide with Plot

```{r, echo=FALSE}
plot(cars)
```

以下是CSS：

.reveal section img {
  margin: 15px 0px;
  background: rgba(255, 255, 255, 0.12);
  border: none;
  box-shadow: none; 
  }

- ErrantBard

Answer 2

问题似乎在于您的 <section> 标签没有包含源代码和其输出。您可以使用 jQuery 来解决这个问题：

---
title: "Title"
author: "..."
output:
  revealjs::revealjs_presentation:
    incremental: true
    includes:
      css: slidyStandard.css
---

<!-- Include jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Add class to img elements -->
<script type="text/javascript">
$(document).ready(function() {
  $elms = $('p > img');
  $elms.addClass('no-border');
});
</script>

<!-- define no-border class -->
<style>
.no-border {
  border: 0px !important;
}
</style>

```{r pressure}
plot(pressure)
```

- Martin Schmelzer

---

我应该将它添加到头部（in_header:）还是正文之前（before_body:）？ - ErrantBard

你可以在 YAML 块之后、第一张幻灯片之前添加它。 - Martin Schmelzer

好的 - 谢谢！它被插入到HTML中，但似乎没有执行，因为img标签没有改变。 - ErrantBard

这很奇怪。我添加了一张图片来展示我得到的结果。我还添加了完整的Rmd内容。图表周围的大黑边框已经消失了（仍有一些阴影）。 - Martin Schmelzer

是的 - 很奇怪，但错误似乎在我的完整演示中，因为我也可以让你的代码工作... 可能是某些东西覆盖了覆盖... :) 谢谢！ - ErrantBard