使用slidify manifest.js从图像中删除边框

Question

here is the code of a slide with an r chunk and a graph:

---
 ```{r, echo=FALSE, warning=FALSE}
dd<-data.frame(x=1:10, y=21:30)
library(ggplot2)
ggplot(dd, aes(x,y)) + geom_point(color="red", size=6) +
  theme(plot.background=element_rect(fill="gray7", color="gray7"),
        panel.background=element_rect(fill="gray7"),
        axis.line=element_line(color="white"),
        panel.grid=element_blank(),
        axis.text=element_text(color="white", size=rel(1.3)),
        axis.title=element_text(color="white", size=rel(1.3))
        )

```
---

this is my YAML:

   ---
    framework   : revealjs
    revealjs    : {theme: night, transition: none, center: "false"} 
    highlighter : highlight.js
    hitheme     : github 
    widgets     : [mathjax]
    mode        : selfcontained 
    url         : {lib: ./libraries}
    knit        : slidify::knit2slides
    assets:
      js:
        - "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"
        - "http://bartaz.github.io/sandbox.js/jquery.highlight.js"
    ---

This gives this plot on the slide:

Obviously the border is there because this is the default for the reveal.js theme. I'm ok with the border on most slides, however for graphs being produced by some R chunks, I don't want it. I'm finding it hard to remove this simply. I have a hacky work-around. I don't include the output of the chunk and then I use some html to refer to the image that's just been named and saved to my assets/fig folder:

---

```{r, echo=FALSE, warning=FALSE, chunk_name, include=FALSE}
dd<-data.frame(x=1:10, y=21:30)
library(ggplot2)
ggplot(dd, aes(x,y)) + geom_point(color="red", size=6) +
  theme(plot.background=element_rect(fill="gray7", color="gray7"),
        panel.background=element_rect(fill="gray7"),
        axis.line=element_line(color="white"),
        panel.grid=element_blank(),
        axis.text=element_text(color="white", size=rel(1.3)),
        axis.title=element_text(color="white", size=rel(1.3))
        )

```


<img src="assets/fig/chunk_name-1.png" style="background:none; border:none; box-shadow:none;">

---

This gives this output:

This is ok, but it doesn't seem the right way to do this and I can see how this might not work in all situations. Is there a better way to get rid of borders for the graphical output of r-chunks ?

edit: For the color aficionados, #111111 is the reveal.js background color, so would have been better to use that.

Answer 1

Ramnath actually gave me some advice as to the answer to this question:

into assets/css put this...

.noborder .reveal section img {
  background:none; 
  border:none; 
  box-shadow:none;
  }

Then refer to this css using the following at the beginning of your slide header:

--- ds:noborder

and obviously, include=T in the R chunk.