Add auto-completion gif and a few tweaks to docs

Author: gadenbuie

.Rbuildignore

@@ -5,3 +5,6 @@
 ^make\.R$
 ^vignettes/singles$
 ^tests_$
+^_.+$
+^docs$
+^index\.Rmd$

README.md

@@ -32,8 +32,8 @@ devtools::install_github("gadenbuie/xaringanthemer")
 
 <!-- Set link to theme-settings, template-variables, theme functions -->
 
-First, add `css: xaringan-themer.css` to your xaringan slides YAML
-header under `xaringan::moonreader:`.
+First, add the `xaringan-themer.css` file to the YAML header of your
+xaringan slides.
 
 ``` yaml
 output:
@@ -59,21 +59,28 @@ mono_light(
 
 <img src="vignettes/images/example_mono_light_1c5253.png" width="100%" />
 
+### Tab Completion
+
 **xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to
 explore](#theme-settings) the [template
 variables](vignettes/template-variables.md) that you can adjust in each
 of the
 themes\!
 
+<img src="vignettes/images/example-rstudio-completion.gif" width="100%" />
+
+### R Markdown Template in RStudio
+
+You can also skip the above and just create a *Ninja Themed
+Presentation* from the New R Markdown Document menu in
+RStudio.
+
 <center>
 
 <img src="vignettes/images/rmarkdown-template-screenshot.png" width="350px" />
 
 </center>
 
-You can also skip the above and just create a *Ninja Themed
-Presentation* from the New R Markdown Document menu in RStudio.
-
 ## Themes
 
 ### Monotone

docs/articles/images/example-rstudio-completion.gif

@@ -1,6 +1,6 @@
 <!-- Set link to theme-settings, template-variables, theme functions -->
 
-First, add `css: xaringan-themer.css` to your xaringan slides YAML header under `xaringan::moonreader:`.
+First, add the `xaringan-themer.css` file to the YAML header of your xaringan slides.
 
 ```yaml
 output:
@@ -31,8 +31,22 @@ if (exists('IS_README') && IS_README) {
 }
 ```
 
+### Tab Completion
+
 **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore][theme-settings] the [template variables][template-variables] that you can adjust in each of the themes!
 
+```{r}
+if (exists('IS_README') && IS_README) {
+  knitr::include_graphics("vignettes/images/example-rstudio-completion.gif") 
+} else {
+  knitr::include_graphics(here::here("vignettes/images/example-rstudio-completion.gif"))
+}
+```
+
+### R Markdown Template in RStudio
+
+You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio.
+
 <center>
 ```{r out.width="350px"}
 if (exists('IS_README') && IS_README) {
@@ -42,5 +56,3 @@ if (exists('IS_README') && IS_README) {
 }
 ```
 </center>
-
-You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio.