Add auto-completion gif and a few tweaks to docs

.Rbuildignore

 ^make\.R$
 ^vignettes/singles$
 ^tests_$
+^_.+$
+^docs$
+^index\.Rmd$

README.md

 
 <!-- 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:
 
 <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/xaringanthemer.html

 <h2 class="hasAnchor">
 <a href="#quick-intro" class="anchor"></a>Quick Intro</h2>
 <!-- Set link to theme-settings, template-variables, theme functions -->
-<p>First, add <code>css: xaringan-themer.css</code> to your xaringan slides YAML header under <code>xaringan::moonreader:</code>.</p>
+<p>First, add the <code>xaringan-themer.css</code> file to the YAML header of your xaringan slides.</p>
 <div class="sourceCode" id="cb1"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="fu">output:</span></a>
 <a class="sourceLine" id="cb1-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>
 <a class="sourceLine" id="cb1-3" data-line-number="3">    <span class="fu">lib_dir:</span><span class="at"> libs</span></a>
 <a class="sourceLine" id="cb2-8" data-line-number="8">)</a>
 <a class="sourceLine" id="cb2-9" data-line-number="9">```</a></code></pre></div>
 <p><img src="images/example_mono_light_1c5253.png" width="100%"></p>
+<div id="tab-completion" class="section level3">
+<h3 class="hasAnchor">
+<a href="#tab-completion" class="anchor"></a>Tab Completion</h3>
 <p><strong>xaringanthemer</strong> is <kbd>Tab</kbd> friendly – <a href="#theme-settings">use autocomplete to explore</a> the <a href="template-variables.html">template variables</a> that you can adjust in each of the themes!</p>
+<p><img src="images/example-rstudio-completion.gif" width="100%"></p>
+</div>
+<div id="r-markdown-template-in-rstudio" class="section level3">
+<h3 class="hasAnchor">
+<a href="#r-markdown-template-in-rstudio" class="anchor"></a>R Markdown Template in RStudio</h3>
+<p>You can also skip the above and just create a <em>Ninja Themed Presentation</em> from the New R Markdown Document menu in RStudio.</p>
 <center>
 <img src="images/rmarkdown-template-screenshot.png" width="350px">
 </center>
-<p>You can also skip the above and just create a <em>Ninja Themed Presentation</em> from the New R Markdown Document menu in RStudio.</p>
+</div>
 </div>
 <div id="themes" class="section level2">
 <h2 class="hasAnchor">

docs/index.html

 <h2 class="hasAnchor">
 <a href="#usage" class="anchor"></a>Usage</h2>
 <!-- Set link to theme-settings, template-variables, theme functions -->
-<p>First, add <code>css: xaringan-themer.css</code> to your xaringan slides YAML header under <code>xaringan::moonreader:</code>.</p>
+<p>First, add the <code>xaringan-themer.css</code> file to the YAML header of your xaringan slides.</p>
 <div class="sourceCode" id="cb2"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="fu">output:</span></a>
 <a class="sourceLine" id="cb2-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>
 <a class="sourceLine" id="cb2-3" data-line-number="3">    <span class="fu">lib_dir:</span><span class="at"> libs</span></a>
 <a class="sourceLine" id="cb3-8" data-line-number="8">)</a>
 <a class="sourceLine" id="cb3-9" data-line-number="9">```</a></code></pre></div>
 <p><img src="articles/images/example_mono_light_1c5253.png" width="100%"></p>
+<div id="tab-completion" class="section level3">
+<h3 class="hasAnchor">
+<a href="#tab-completion" class="anchor"></a>Tab Completion</h3>
 <p><strong>xaringanthemer</strong> is <kbd>Tab</kbd> friendly – <a href="articles/xaringanthemer.html#theme-settings">use autocomplete to explore</a> the <a href="articles/template-variables.html">template variables</a> that you can adjust in each of the themes!</p>
+<p><img src="articles/images/example-rstudio-completion.gif" width="100%"></p>
+</div>
+<div id="r-markdown-template-in-rstudio" class="section level3">
+<h3 class="hasAnchor">
+<a href="#r-markdown-template-in-rstudio" class="anchor"></a>R Markdown Template in RStudio</h3>
+<p>You can also skip the above and just create a <em>Ninja Themed Presentation</em> from the New R Markdown Document menu in RStudio.</p>
 <center>
 <img src="articles/images/rmarkdown-template-screenshot.png" width="350px">
 </center>
-<p>You can also skip the above and just create a <em>Ninja Themed Presentation</em> from the New R Markdown Document menu in RStudio.</p>
+</div>
 </div>
 </div>
   </div>

vignettes/rmdchunks/_quick-intro.Rmd

 <!-- 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:
 }
 ```
 
+### 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) {
 }
 ```
 </center>
-
-You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio.