我试图将一个揭示-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;
}
有谁知道我做错了什么?
答案 0 :(得分:3)
我意识到我已将自定义css放在YAML-header中的错误位置。因此,它没有用。
以下是使用自定义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;
}
答案 1 :(得分:1)
问题似乎是,您的<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)
```