title: Removing border from images using slidify reveal.js
body: <p>here is the code of a slide with an r chunk and a graph:</p>
  
  <pre><code>---
   ```{r, echo=FALSE, warning=FALSE}
  dd&lt;-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))
          )
  
  ```
  ---
  </code></pre>
  
  <p>this is my YAML:</p>
  
  <pre><code>   ---
      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"
      ---
  </code></pre>
  
  <p>This gives this plot on the slide:</p>
  
  <p><img src="https://i.stack.imgur.com/uz1tz.png" alt="enter image description here"></p>
  
  <p>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 <code>assets/fig</code> folder:</p>
  
  <hr>
  
  <pre><code>```{r, echo=FALSE, warning=FALSE, chunk_name, include=FALSE}
  dd&lt;-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))
          )
  
  ```
  
  
  &lt;img src="assets/fig/chunk_name-1.png" style="background:none; border:none; box-shadow:none;"&gt;
  
  ---
  </code></pre>
  
  <p>This gives this output:</p>
  
  <p><img src="https://i.stack.imgur.com/OavyL.png" alt="enter image description here"></p>
  
  <p>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 ?</p>
  
  <p>edit:  For the color aficionados, #111111 is the reveal.js background color, so would have been better to use that.</p>