garrick
/
xaringanthemer
spogulis no https://github.com/gadenbuie/xaringanthemer.git
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Problēmas 0 Laidieni 10 Vikivietne Aktivitāte
šŸ˜Ž Give your xaringan slides some style
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
511 Revīzijas
5 Atzari
Koks: ef23fc5cb2
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no 'ef23fc5cb2'
${ noResults }
xaringanthemer/dev/articles/ggplot2-themes.html

390 rindas
44KB
Neapstrādāts Vainot Vēsture 

  1. <!DOCTYPE html>

  2. <!-- Generated by pkgdown: do not edit by hand --><html lang="en">

  3. <head>

  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5. <meta charset="utf-8">

  6. <meta http-equiv="X-UA-Compatible" content="IE=edge">

  7. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  8. <meta name="description" content="xaringanthemer">

  9. <title>ggplot2 Themes ā€¢ xaringanthemer</title>

  10. <!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="../favicon-16x16.png">

  11. <link rel="icon" type="image/png" sizes="32x32" href="../favicon-32x32.png">

  12. <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="../apple-touch-icon.png">

  13. <link rel="apple-touch-icon" type="image/png" sizes="120x120" href="../apple-touch-icon-120x120.png">

  14. <link rel="apple-touch-icon" type="image/png" sizes="76x76" href="../apple-touch-icon-76x76.png">

  15. <link rel="apple-touch-icon" type="image/png" sizes="60x60" href="../apple-touch-icon-60x60.png">

  16. <script src="../deps/jquery-3.6.0/jquery-3.6.0.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  17. <link href="../deps/bootstrap-5.1.3/bootstrap.min.css" rel="stylesheet">

  18. <script src="../deps/bootstrap-5.1.3/bootstrap.bundle.min.js"></script><link href="../deps/IBM_Plex_Mono-0.4.2/font.css" rel="stylesheet">

  19. <link href="../deps/Outfit-0.4.2/font.css" rel="stylesheet">

  20. <!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">

  21. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">

  22. <!-- bootstrap-toc --><script src="https://cdn.rawgit.com/afeld/bootstrap-toc/v1.0.1/dist/bootstrap-toc.min.js"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- search --><script src="https://cdnjs.cloudflare.com/ajax/libs/fuse.js/6.4.6/fuse.js" integrity="sha512-zv6Ywkjyktsohkbp9bb45V6tEMoWhzFzXis+LrMehmJZZSys19Yxf1dopHx7WzIKxr5tK2dVcYmaCk2uqdjF4A==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/autocomplete.js/0.38.0/autocomplete.jquery.min.js" integrity="sha512-GU9ayf+66Xx2TmpxqJpliWbT5PiGYxpaG8rfnBEk1LL8l1KGkRShhngwdXK1UgqhAzWpZHSiYPc09/NwDQIGyg==" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js" integrity="sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww==" crossorigin="anonymous"></script><!-- pkgdown --><script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet">

  23. <meta property="og:title" content="ggplot2 Themes">

  24. <meta property="og:description" content="xaringanthemer">

  25. <meta property="og:image" content="https://pkg.garrickadenbuie.com/xaringanthemer/logo.png">

  26. <meta name="twitter:card" content="summary">

  27. <meta name="twitter:creator" content="@grrrck">

  28. <meta name="twitter:site" content="@grrrck">

  29. <meta name="robots" content="noindex">

  30. <!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>

  31. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

  32. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

  33. <![endif]-->

  34. </head>

  35. <body>

  36.     <a href="#main" class="visually-hidden-focusable">Skip to contents</a>

  37.     

  38. 

  39.     <nav class="navbar fixed-top navbar-light navbar-expand-lg bg-light"><div class="container">

  40.     

  41.     <a class="navbar-brand me-2" href="../index.html">xaringanthemer</a>

  42. 

  43.     <small class="nav-text text-danger me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="In-development version">0.4.1.9000</small>

  44. 

  45.     

  46.     <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">

  47.       <span class="navbar-toggler-icon"></span>

  48.     </button>

  49. 

  50.     <div id="navbar" class="collapse navbar-collapse ms-3">

  51.       <ul class="navbar-nav me-auto">

  52. <li class="nav-item">

  53.   <a class="nav-link" href="../articles/xaringanthemer.html">Features</a>

  54. </li>

  55. <li class="nav-item">

  56.   <a class="nav-link" href="../reference/index.html">Reference</a>

  57. </li>

  58. <li class="active nav-item dropdown">

  59.   <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" id="dropdown-themes">Themes</a>

  60.   <div class="dropdown-menu" aria-labelledby="dropdown-themes">

  61.     <h6 class="dropdown-header" data-toc-skip>Themes</h6>

  62.     <a class="dropdown-item" href="../articles/themes.html">Slide Themes</a>

  63.     <a class="dropdown-item" href="../articles/ggplot2-themes.html">ggplot2 Themes</a>

  64.     <div class="dropdown-divider"></div>

  65.     <h6 class="dropdown-header" data-toc-skip>More Customization</h6>

  66.     <a class="dropdown-item" href="../articles/fonts.html">Fonts</a>

  67.     <a class="dropdown-item" href="../articles/template-variables.html">Template Variables</a>

  68.   </div>

  69. </li>

  70.       </ul>

  71. <form class="form-inline my-2 my-lg-0" role="search">

  72.         <input type="search" class="form-control me-sm-2" aria-label="Toggle navigation" name="search-input" data-search-index="../search.json" id="search-input" placeholder="Search for" autocomplete="off">

  73. </form>

  74. 

  75.       <ul class="navbar-nav">

  76. <li class="nav-item dropdown">

  77.   <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" id="dropdown--">

  78.     <span class="far fa far fa-newspaper fa-lg"></span>

  79.      

  80.     

  81.   </a>

  82.   <div class="dropdown-menu" aria-labelledby="dropdown--">

  83.     <a class="external-link dropdown-item" href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a>

  84.     <div class="dropdown-divider"></div>

  85.     <a class="dropdown-item" href="../news/index.html">Changelog</a>

  86.   </div>

  87. </li>

  88. <li class="nav-item">

  89.   <a class="external-link nav-link" href="https://github.com/gadenbuie/xaringanthemer">

  90.     <span class="fab fa fab fa-github fa-lg"></span>

  91.      

  92.   </a>

  93. </li>

  94. <li class="nav-item">

  95.   <a class="external-link nav-link" href="https://twitter.com/grrrck">

  96.     <span class="fab fa fab fa-twitter fa-lg"></span>

  97.      

  98.   </a>

  99. </li>

  100. <li class="nav-item">

  101.   <a class="external-link nav-link" href="https://www.garrickadenbuie.com">

  102.     <span class="fas fa fas fa-home fa-lg"></span>

  103.      

  104.   </a>

  105. </li>

  106.       </ul>

  107. </div>

  108. 

  109.     

  110.   </div>

  111. </nav><div class="container template-article">

  112. 

  113. 

  114. 

  115. 

  116. <div class="row">

  117.   <main id="main" class="col-md-9"><div class="page-header">

  118.       <img src="../logo.png" class="logo" alt=""><h1>ggplot2 Themes</h1>

  119.             

  120.       

  121.       <small class="dont-index">Source: <a href="https://github.com/gadenbuie/xaringanthemer/blob/HEAD/vignettes/ggplot2-themes.Rmd" class="external-link"><code>vignettes/ggplot2-themes.Rmd</code></a></small>

  122.       <div class="d-none name"><code>ggplot2-themes.Rmd</code></div>

  123.     </div>

  124. 

  125.     

  126.     

  127. <style type="text/css">

  128. img { max-width: 100%; border: none; }

  129. </style>

  130. <p><strong>xaringanthemer</strong> provides two <a href="https://ggplot2.tidyverse.org" class="external-link">ggplot2</a> themes for your <a href="https://github.com/yihui/xaringan" class="external-link">xaringan</a> slides to help your data visualizations blend seamlessly into your slides. Use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to create plots that match your primary slide style or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> to match the style of your inverse slides.</p>

  131. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/theme-xaringan-inverse.png" alt="Examples slides with ggplot2 plots that match the xaringanthemer theme" data-external="1"></p>

  132. <div class="section level3">

  133. <h3 id="key-features">Key Features<a class="anchor" aria-label="anchor" href="#key-features"></a>

  134. </h3>

  135. <ul>

  136. <li><p>The ggplot2 themes <a href="#setup-your-theme">uses the colors and themes</a> from the <strong>xaringanthemer</strong> style functions, if you set your theme inside your slides. Otherwise, it <a href="#using-xaringan-themer-css">draws from the <code>xaringan-themer.css</code> file</a>.</p></li>

  137. <li><p>The themes <a href="#colors">pick appropriate colors</a> for titles, grid lines, and axis text, and also sets the default colors of geoms like <code><a href="https://ggplot2.tidyverse.org/reference/geom_point.html" class="external-link">ggplot2::geom_point()</a></code> and <code><a href="https://ggplot2.tidyverse.org/reference/geom_text.html" class="external-link">ggplot2::geom_text()</a></code>. There are also monotone <a href="#scale-xaringan">color and fill scales</a> based around the primary accent color used in your xaringan theme.</p></li>

  138. <li><p>If you use Google Fonts in your slides, the ggplot2 themes use the showtext package to <a href="#fonts">automatically match the title and axis text fonts</a> of your plots to the heading and text fonts in your xaringan theme.</p></li>

  139. <li><p>Iā€™ve done my best to set up everything so that <em>it just works</em>, but sometimes the showtext package adds a bit of complication to the routine data visualization workflow. At the end of this vignette I include <a href="#tips">a few tips</a> for working with showtext.</p></li>

  140. </ul>

  141. </div>

  142. <div class="section level2">

  143. <h2 id="setup-your-theme">Setup Your Theme<a class="anchor" aria-label="anchor" href="#setup-your-theme"></a>

  144. </h2>

  145. <p><code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> is designed to automatically use the fonts and colors you used for your slidesā€™ style theme. Here Iā€™m going to use a moderately customized color theme based on <code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code>, that results in the xaringan theme previewed in the slides above.</p>

  146. <p>Iā€™ve also picked out a few fonts from <a href="https://fonts.google.com" class="external-link">Google Fonts</a> that I would probably never use in a real presentation, but theyā€™re flashy enough to make it easy to see that weā€™re not using the standard default fonts.</p>

  147. <div class="sourceCode" id="cb1"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="in">```{r xaringan-themer, include=FALSE, warning=FALSE}</span></span>

  148. <span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="in">library(xaringanthemer)</span></span>

  149. <span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="in">style_mono_accent(</span></span>

  150. <span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="in">  base_color = "#DC322F",               # bright red</span></span>

  151. <span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="in">  inverse_background_color = "#002B36", # dark dark blue</span></span>

  152. <span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="in">  inverse_header_color = "#31b09e",     # light aqua green</span></span>

  153. <span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="in">  inverse_text_color = "#FFFFFF",       # white</span></span>

  154. <span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="in">  title_slide_background_color = "var(--base)",</span></span>

  155. <span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a><span class="in">  text_font_google = google_font("Kelly Slab"),</span></span>

  156. <span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a><span class="in">  header_font_google = google_font("Oleo Script")</span></span>

  157. <span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a><span class="in">)</span></span>

  158. <span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a><span class="in">```</span></span></code></pre></div>

  159. <p>If you use a hidden chunk like this one inside your slidesā€™ R Markdown source file, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will know which colors and fonts youā€™ve picked.</p>

  160. <p>Adding <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to a ggplot, like this demonstration plot using the <code>mpg</code> dataset from ggplot2, changes the colors and fonts of your plot theme.</p>

  161. <div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">

  162. <code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://ggplot2.tidyverse.org" class="external-link">ggplot2</a></span><span class="op">)</span></span>

  163. <span></span>

  164. <span><span class="va">g_base</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">mpg</span><span class="op">)</span> <span class="op">+</span> </span>

  165. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span><span class="va">hwy</span>, <span class="va">cty</span><span class="op">)</span> <span class="op">+</span> </span>

  166. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_point.html" class="external-link">geom_point</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  167. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span></span>

  168. <span></span>

  169. <span><span class="co"># Basic plot with default theme</span></span>

  170. <span><span class="va">g_base</span></span></code></pre></div>

  171. <div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">

  172. <code class="sourceCode R"><span><span class="co"># Fancy slide-matching themed plot</span></span>

  173. <span><span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  174. <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-1-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"></p>

  175. <p>With <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> the fonts and colors match the slide theme. The default colors of points (like other geometries) has been changed as well to match the slide colors.</p>

  176. <p>To restore the previous default colors of ggplot2 geoms, call</p>

  177. <div class="sourceCode" id="cb4"><pre class="downlit sourceCode r">

  178. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  179. <p>Add <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> to automatically create a plot that matches the inverse slide style.</p>

  180. <div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">

  181. <code class="sourceCode R"><span><span class="co"># theme_xaringan() on the left, theme_xaringan_inverse() on the right</span></span>

  182. <span><span class="va">g_base</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  183. <p><img src="ggplot2-themes_files/figure-html/ggplot2-demo-2-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/ggplot2-demo-inverse-1.png" width="48%"></p>

  184. </div>

  185. <div class="section level2">

  186. <h2 id="using-xaringan-themer-css">Using <code>theme_xaringan()</code> without calling a style function<a class="anchor" aria-label="anchor" href="#using-xaringan-themer-css"></a>

  187. </h2>

  188. <p>Once youā€™ve set up your custom xaringan theme, you might want to use the themeā€™s CSS file for new presentations instead of rebuilding your theme with every new slide deck.</p>

  189. <p>In these cases, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will look for a CSS file written by <strong>xaringanthemer</strong> in your slidesā€™ directory or in a sub-folder under the same directory that it can use to determine the colors and fonts used in your slides.</p>

  190. <p>If you happen to have multiple slide themes written by <strong>xaringanthemer</strong> in the same directory, the one named <code>xaringan-themer.css</code> will be used. If xaringanthemer picks the wrong file, you can use the <code>css_file</code> in <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> to specify exactly which CSS file to use.</p>

  191. <div class="sourceCode" id="cb6"><pre class="downlit sourceCode r">

  192. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span>css_file <span class="op">=</span> <span class="st">"my-slide-style.css"</span><span class="op">)</span></span></code></pre></div>

  193. <p>Note that you can use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> anywhere you want, not just in xaringan slides! (For example, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> is working great in these vignettes!) This means that you can use your plot theme in reports and websites while maintaining a consistent look and feel or brand.</p>

  194. <p>Finally, you donā€™t even need a xaringanthemer CSS file. You can specify the key ingredients for the theme as arguments to <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, namely text, background, and accent colors as well as text and title fonts.</p>

  195. <p>The R chunk below replicated the demonstrated theme, but doesnā€™t require a slide style to be set or stored in a CSS file.</p>

  196. <div class="sourceCode" id="cb7"><pre class="downlit sourceCode r">

  197. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span></span>

  198. <span>  text_color <span class="op">=</span> <span class="st">"#3D3E38"</span>,</span>

  199. <span>  background_color <span class="op">=</span> <span class="st">"#FFFFFF"</span>,</span>

  200. <span>  accent_color <span class="op">=</span> <span class="st">"#DC322F"</span>,</span>

  201. <span>  text_font <span class="op">=</span> <span class="st">"Kelly Slab"</span>,</span>

  202. <span>  text_font_use_google <span class="op">=</span> <span class="cn">TRUE</span>,</span>

  203. <span>  title_font <span class="op">=</span> <span class="st">"Oleo Script"</span>,</span>

  204. <span>  title_font_use_google <span class="op">=</span> <span class="cn">TRUE</span></span>

  205. <span><span class="op">)</span></span></code></pre></div>

  206. </div>

  207. <div class="section level2">

  208. <h2 id="colors">Colors<a class="anchor" aria-label="anchor" href="#colors"></a>

  209. </h2>

  210. <p>As demonstrated above, <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> modify the default colors and fonts of geometries. This means that <code><a href="https://ggplot2.tidyverse.org/reference/geom_point.html" class="external-link">geom_point()</a></code>, <code><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html" class="external-link">geom_bar()</a></code>, <code><a href="https://ggplot2.tidyverse.org/reference/geom_text.html" class="external-link">geom_text()</a></code> and other geoms used in your plots will reasonably match your slide themes with no extra work.</p>

  211. <div class="sourceCode" id="cb8"><pre class="downlit sourceCode r">

  212. <code class="sourceCode R"><span><span class="va">g_diamonds</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span></span>

  213. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html" class="external-link">geom_bar</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  214. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="cn">NULL</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span></span>

  215. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/lims.html" class="external-link">ylim</a></span><span class="op">(</span><span class="fl">0</span>, <span class="fl">25000</span><span class="op">)</span></span>

  216. <span></span>

  217. <span><span class="va">g_diamonds</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  218. <p><img src="ggplot2-themes_files/figure-html/demo-geom-defaults-1.png" width="960"></p>

  219. <p>Whenever <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> are called, the default values of many of ggplot2 geoms are set by default. You can opt out of this by setting <code>set_ggplot_defaults = FALSE</code> when using either theme. You can also restore the geom aesthetic defaults to their original values before the first time <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> or <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> were used by running</p>

  220. <div class="sourceCode" id="cb9"><pre class="downlit sourceCode r">

  221. <code class="sourceCode R"><span><span class="fu"><a href="../reference/theme_xaringan_set_defaults.html">theme_xaringan_restore_defaults</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  222. <div class="section level3">

  223. <h3 id="scale-xaringan">Custom Color and Fill Scales<a class="anchor" aria-label="anchor" href="#scale-xaringan"></a>

  224. </h3>

  225. <p>xaringanthemer includes monotone color and fill scales to match your ggplot2 theme. The scale functions all follow the naming pattern <code>scale_xaringan_&lt;aes&gt;_&lt;data_type&gt;()</code>, where <code>&lt;aes&gt;</code> is replaced with either <code>color</code> or <code>fill</code> and <code>&lt;data_type&gt;</code> is one of <code>discrete</code> or <code>continuous</code>.</p>

  226. <p>These scales use <code><a href="https://colorspace.R-Forge.R-project.org/reference/hcl_palettes.html" class="external-link">colorspace::sequential_hcl()</a></code> to create a sequential, monotone color scale based on the primary accent color in your slides. Color scales matching the inverse slides are possible by setting the argument <code>inverse = TRUE</code>.</p>

  227. <div class="sourceCode" id="cb10"><pre class="downlit sourceCode r">

  228. <code class="sourceCode R"><span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">cut</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span></span>

  229. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html" class="external-link">geom_bar</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>fill <span class="op">=</span> <span class="va">..count..</span><span class="op">)</span>, show.legend <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op">+</span></span>

  230. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="cn">NULL</span>, y <span class="op">=</span> <span class="st">"Count"</span>, title <span class="op">=</span> <span class="st">"Diamond Cut Quality"</span><span class="op">)</span> <span class="op">+</span></span>

  231. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  232. <span>  <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_fill_continuous</a></span><span class="op">(</span><span class="op">)</span></span>

  233. <span></span>

  234. <span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html" class="external-link">ggplot</a></span><span class="op">(</span><span class="va">mpg</span>, <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>x <span class="op">=</span> <span class="va">hwy</span>, y <span class="op">=</span> <span class="va">cty</span><span class="op">)</span><span class="op">)</span> <span class="op">+</span></span>

  235. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_count.html" class="external-link">geom_count</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>color <span class="op">=</span> <span class="va">..n..</span><span class="op">)</span>, show.legend <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op">+</span></span>

  236. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Highway MPG"</span>, y <span class="op">=</span> <span class="st">"City MPG"</span>, title <span class="op">=</span> <span class="st">"Fuel Efficiency"</span><span class="op">)</span> <span class="op">+</span></span>

  237. <span>  <span class="fu"><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse</a></span><span class="op">(</span><span class="op">)</span> <span class="op">+</span></span>

  238. <span>  <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_color_continuous</a></span><span class="op">(</span>breaks <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/seq.html" class="external-link">seq</a></span><span class="op">(</span><span class="fl">3</span>, <span class="fl">12</span>, <span class="fl">2</span><span class="op">)</span>, inverse <span class="op">=</span> <span class="cn">TRUE</span>, begin <span class="op">=</span> <span class="fl">1</span>, end <span class="op">=</span> <span class="fl">0</span><span class="op">)</span></span></code></pre></div>

  239. <p><img src="ggplot2-themes_files/figure-html/scale-xaringan-1.png" width="48%"><img src="ggplot2-themes_files/figure-html/scale-xaringan-2.png" width="48%"></p>

  240. <p>In general, these color scales arenā€™t great at representing the underlying data. In both examples above, the color and fill scales duplicate information displayed via other aesthetics (the height of the bar or the size of the point). I recommend using these scales primarily for style, although the scales can be more or less effective depending on your color scheme.</p>

  241. <p>The scales come with a few more options:</p>

  242. <ul>

  243. <li><p>Choose a different primary color using the <code>color</code> argument.</p></li>

  244. <li><p>Use the inverse color slide theme color with <code>inverse = TRUE</code> (only applies when <code>color</code> is not supplied).</p></li>

  245. <li><p>Invert the direction of the discrete scales with <code>direction = -1</code>.</p></li>

  246. <li><p>Control the range of the continuous color scale used with <code>begin</code> and <code>end</code>. You can also invert the direction of the continuous color scale by setting <code>begin = 1</code> and <code>end = 0</code>.</p></li>

  247. </ul>

  248. </div>

  249. </div>

  250. <div class="section level2">

  251. <h2 id="fonts">Fonts<a class="anchor" aria-label="anchor" href="#fonts"></a>

  252. </h2>

  253. <div class="section level3">

  254. <h3 id="automatically-match-slide-and-plot-fonts">Automatically match slide and plot fonts<a class="anchor" aria-label="anchor" href="#automatically-match-slide-and-plot-fonts"></a>

  255. </h3>

  256. <p>xaringanthemer uses the <a href="https://github.com/yixuan/showtext" class="external-link">showtext</a> and <a href="https://github.com/yixuan/sysfonts" class="external-link">sysfonts</a> packages by Yixuan Qiu to automatically download and register <a href="https://fonts.google.com" class="external-link">Google Fonts</a> for use with your ggplot2 plots.</p>

  257. <p>In your slide theme, use the <code>&lt;type&gt;_font_google</code> argument with the <code>google_font("&lt;font name&gt;")</code> helper (or the default xaringanthemer fonts) and <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> will handle the rest. In our demo theme, we used <code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code> with</p>

  258. <ul>

  259. <li>

  260. <code>text_font_google = google_font("Kelley Slab")</code> and</li>

  261. <li>

  262. <code>header_font_google = google_font("Oleo Script")</code>.</li>

  263. </ul>

  264. <div class="sourceCode" id="cb11"><pre class="downlit sourceCode r">

  265. <code class="sourceCode R"><span><span class="va">g_diamonds_with_text</span> <span class="op">&lt;-</span> </span>

  266. <span>  <span class="va">g_diamonds</span> <span class="op">+</span> </span>

  267. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_text.html" class="external-link">geom_text</a></span><span class="op">(</span><span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html" class="external-link">aes</a></span><span class="op">(</span>y <span class="op">=</span> <span class="va">..count..</span>, label <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/format.html" class="external-link">format</a></span><span class="op">(</span><span class="va">..count..</span>, big.mark <span class="op">=</span> <span class="st">","</span><span class="op">)</span><span class="op">)</span>,</span>

  268. <span>            vjust <span class="op">=</span> <span class="op">-</span><span class="fl">0.30</span>, size <span class="op">=</span> <span class="fl">8</span>, stat <span class="op">=</span> <span class="st">"count"</span><span class="op">)</span> <span class="op">+</span></span>

  269. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span>x <span class="op">=</span> <span class="st">"Cut"</span>, y <span class="op">=</span> <span class="st">"Count"</span><span class="op">)</span></span>

  270. <span></span>

  271. <span><span class="va">g_diamonds_with_text</span> <span class="op">+</span> <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  272. <p><img src="ggplot2-themes_files/figure-html/text%20demo-1.png" width="960"></p>

  273. <p><code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> applies the header font to the plot and axis titles and the text font to the axis ticks labels and any text geoms or annotations.</p>

  274. </div>

  275. <div class="section level3">

  276. <h3 id="manually-specify-plot-fonts">Manually specify plot fonts<a class="anchor" aria-label="anchor" href="#manually-specify-plot-fonts"></a>

  277. </h3>

  278. <p>You can also specify specific fonts for your plot theme. Both <code>text_font</code> and <code>title_font</code> in <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> and <code><a href="../reference/theme_xaringan_inverse.html">theme_xaringan_inverse()</a></code> accept <code><a href="../reference/google_font.html">google_font()</a></code>s directly.</p>

  279. <div class="sourceCode" id="cb12"><pre class="downlit sourceCode r">

  280. <code class="sourceCode R"><span><span class="va">g_diamonds_with_text</span> <span class="op">+</span></span>

  281. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span></span>

  282. <span>    text_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Ranga"</span><span class="op">)</span>,</span>

  283. <span>    title_font <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Holtwood One SC"</span><span class="op">)</span></span>

  284. <span>  <span class="op">)</span></span></code></pre></div>

  285. <p><img src="ggplot2-themes_files/figure-html/text-demo-2-1.png" width="960"></p>

  286. </div>

  287. <div class="section level3">

  288. <h3 id="using-fonts-not-in-google-fonts">Using fonts not in Google Fonts<a class="anchor" aria-label="anchor" href="#using-fonts-not-in-google-fonts"></a>

  289. </h3>

  290. <p>If you want to use a font that isnā€™t in the Google Fonts collection, you need to manually register the font with sysfonts so that it can be used in your plots.</p>

  291. <p>I found a nice open source font called <a href="https://fontlibrary.org/en/font/glacial-indifference" class="external-link">Glacial Indifference</a> by Alfredo Marco Pradil available at <a href="https://fontlibrary.org" class="external-link">fontlibrary.org</a>. In my theme style function, I would use</p>

  292. <pre><code><span><span class="fu"><a href="../reference/style_mono_accent.html">style_mono_accent</a></span><span class="op">(</span></span>

  293. <span>  text_font_family <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>,</span>

  294. <span>  text_font_url <span class="op">=</span> <span class="st">"https://fontlibrary.org/face/glacial-indifference"</span></span>

  295. <span><span class="op">)</span></span></code></pre>

  296. <p>but sysfonts wonā€™t know where to find the TTF font files for this font.</p>

  297. <p>To register the font with sysfonts, we use <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html" class="external-link">sysfonts::font_add()</a></code>, but first we need to download the font file ā€” the <code><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html" class="external-link">sysfonts::font_add()</a></code> function requires the font file to be local.</p>

  298. <p>By inspecting the CSS file at the link I used in <code>text_font_url</code>, I found a direct URL for the <code>.ttf</code> files for <em>GlacialIndifferenceRegular</em>. Iā€™ve included the code I used to download the font to a temporary file below, but in case the URL breaks, Iā€™ve included <em>Glacial Indifference</em> in the xaringanthemer package.</p>

  299. <div class="sourceCode" id="cb14"><pre class="downlit sourceCode r">

  300. <code class="sourceCode R"><span><span class="va">font_url</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/file.path.html" class="external-link">file.path</a></span><span class="op">(</span></span>

  301. <span>  <span class="st">"https://fontlibrary.org/assets/fonts/glacial-indifference/"</span>,</span>

  302. <span>  <span class="st">"5f2cf277506e19ec77729122f27b1faf/0820b3c58fed35de298219f314635982"</span>, </span>

  303. <span>  <span class="st">"GlacialIndifferenceRegular.ttf"</span></span>

  304. <span><span class="op">)</span></span>

  305. <span></span>

  306. <span><span class="va">font_temp</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/tempfile.html" class="external-link">tempfile</a></span><span class="op">(</span><span class="op">)</span></span>

  307. <span><span class="fu"><a href="https://rdrr.io/r/utils/download.file.html" class="external-link">download.file</a></span><span class="op">(</span><span class="va">font_url</span>, <span class="va">font_temp</span><span class="op">)</span></span></code></pre></div>

  308. <div class="sourceCode" id="cb15"><pre class="downlit sourceCode r">

  309. <code class="sourceCode R"><span><span class="co"># Path to the local custom font file</span></span>

  310. <span><span class="va">font_temp</span> <span class="op">&lt;-</span> <span class="fu"><a href="https://rdrr.io/r/base/system.file.html" class="external-link">system.file</a></span><span class="op">(</span></span>

  311. <span>  <span class="st">"fonts/GlacialIndifferenceRegular.ttf"</span>, package <span class="op">=</span> <span class="st">"xaringanthemer"</span></span>

  312. <span><span class="op">)</span></span>

  313. <span></span>

  314. <span><span class="co"># Register the font with sysfonts/showtext</span></span>

  315. <span><span class="fu">sysfonts</span><span class="fu">::</span><span class="fu"><a href="https://rdrr.io/pkg/sysfonts/man/font_add.html" class="external-link">font_add</a></span><span class="op">(</span>family <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>, regular <span class="op">=</span> <span class="va">font_temp</span><span class="op">)</span></span>

  316. <span></span>

  317. <span><span class="co"># Now it's available for use!</span></span>

  318. <span><span class="va">g_diamonds_with_text</span> <span class="op">+</span></span>

  319. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span></span>

  320. <span>    text_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span>,</span>

  321. <span>    title_font <span class="op">=</span> <span class="st">"GlacialIndifferenceRegular"</span></span>

  322. <span>  <span class="op">)</span></span></code></pre></div>

  323. <p><img src="ggplot2-themes_files/figure-html/sysfonts-custom-font-1.png" width="960"></p>

  324. </div>

  325. </div>

  326. <div class="section level2">

  327. <h2 id="tips">Tips for using the showtext package<a class="anchor" aria-label="anchor" href="#tips"></a>

  328. </h2>

  329. <p>Working with fonts is notoriously frustrating, but <a href="https://github.com/yixuan/showtext" class="external-link">showtext</a> and <a href="https://github.com/yixuan/sysfonts" class="external-link">sysfonts</a> do a great job ensuring that Google Fonts and custom fonts work on all platforms. As youā€™ve seen in the examples above, the process is mostly seamless, but there are a few caveats and places where the methods used by these packages may interrupt a typical ggplot2 workflow.</p>

  330. <div class="section level3">

  331. <h3 id="r-markdown">R Markdown<a class="anchor" aria-label="anchor" href="#r-markdown"></a>

  332. </h3>

  333. <p>To use the showtext package in R Markdown, knitr requires that the <code>fig.showtext</code> chunk option be set to <code>TRUE</code>, either in the chunk producing the figure or globally in the document.</p>

  334. <p>xaringanthemer tries to set this chunk option for you, but in some circumstances itā€™s possible to call <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> in a way that xaringanthemer canā€™t set this option for you. When this happens, xaringanthemer will produce an error:</p>

  335. <pre><code>Error in verify_fig_showtext(fn) : 

  336.   To use theme_xaringan_base() with knitr, you need to set the chunk

  337.   option `fig.showtext = TRUE` for this chunk. Or you can set this option

  338.   globally with `knitr::opts_chunk$set(fig.showtext = TRUE)`.</code></pre>

  339. <p>If you find yourself facing this error, follow the instructions and choose one of the two suggestions:</p>

  340. <ol style="list-style-type: decimal">

  341. <li><p>Add <code>fig.showtext = TRUE</code> to the chunk producing the figure</p></li>

  342. <li><p>Or set the option globally in your <code>setup</code> chunk with <code>knitr::opts_chunk$set(fig.showtext = TRUE)</code>.</p></li>

  343. </ol>

  344. </div>

  345. <div class="section level3">

  346. <h3 id="macos">MacOS<a class="anchor" aria-label="anchor" href="#macos"></a>

  347. </h3>

  348. <p>On MacOS, youā€™ll need to have <code>xquartz</code> installed for <code>sysfonts</code> to work properly. If you use <a href="https://brew.sh/" class="external-link">homebrew</a>, you can install <code>xquartz</code> with</p>

  349. <div class="sourceCode" id="cb17"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb17-1"><a href="#cb17-1" aria-hidden="true" tabindex="-1"></a><span class="ex">brew</span> cask install xquartz</span></code></pre></div>

  350. </div>

  351. <div class="section level3">

  352. <h3 id="in-rstudio">In RStudio<a class="anchor" aria-label="anchor" href="#in-rstudio"></a>

  353. </h3>

  354. <p>showtext and RStudioā€™s graphic device donā€™t always work well together. Depending on your version of RStudio, if you try to preview plots that use <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code>, the fonts in the preview will still be the default sans font or you may not see a plot at all.</p>

  355. <p>To work around this, open a new <code><a href="https://rdrr.io/r/grDevices/quartz.html" class="external-link">quartz()</a></code> (MacOS) or <code><a href="https://rdrr.io/r/grDevices/x11.html" class="external-link">x11()</a></code> (Windows/Unix) plot device. The plots will then render in a separate window. I usually create a <code><a href="https://rdrr.io/r/grDevices/quartz.html" class="external-link">quartz()</a></code> device with a similar size ratio to my slides.</p>

  356. <div class="sourceCode" id="cb18"><pre class="downlit sourceCode r">

  357. <code class="sourceCode R"><span><span class="co">## On Windows</span></span>

  358. <span><span class="co"># x11(width = 16 * 2/3, height = 9 * 2/3)</span></span>

  359. <span></span>

  360. <span><span class="co">## On MacOS</span></span>

  361. <span><span class="fu"><a href="https://rdrr.io/r/grDevices/quartz.html" class="external-link">quartz</a></span><span class="op">(</span>width <span class="op">=</span> <span class="fl">16</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span>, height <span class="op">=</span> <span class="fl">9</span> <span class="op">*</span> <span class="fl">2</span><span class="op">/</span><span class="fl">3</span><span class="op">)</span></span>

  362. <span><span class="co">## run plot code to preview in separate window</span></span>

  363. <span><span class="fu"><a href="https://rdrr.io/r/grDevices/dev.html" class="external-link">dev.off</a></span><span class="op">(</span><span class="op">)</span> <span class="co"># call when done to close the device</span></span></code></pre></div>

  364. </div>

  365. </div>

  366.   </main><aside class="col-md-3"><nav id="toc"><h2>On this page</h2>

  367.     </nav></aside>

  368. </div>

  369. 

  370. 

  371. 

  372.     <footer><div class="pkgdown-footer-left">

  373.   <p></p>

  374. <p>Developed by <a href="https://www.garrickadenbuie.com" class="external-link">Garrick Aden-Buie</a>.</p>

  375. </div>

  376. 

  377. <div class="pkgdown-footer-right">

  378.   <p></p>

  379. <p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.0.6.</p>

  380. </div>

  381. 

  382.     </footer>

  383. </div>

  384. 

  385.   

  386. 

  387.   <script>window.jQuery('.navbar-brand + small').addClass(['badge', 'bg-secondary', 'text-light']).removeClass('text-muted')</script>

  388. </body>

  389. </html>