garrick
/
xaringanthemer
зеркало из https://github.com/gadenbuie/xaringanthemer.git
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Релизы 10 Вики Активность
😎 Give your xaringan slides some style
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
523 коммитов
5 Ветки
Дерево: cdc18d5a87
Ветки Теги
${ item.name }
Создать ветку ${ searchTerm }
из 'cdc18d5a87'
${ noResults }
xaringanthemer/dev/articles/xaringanthemer.html

541 line
40KB
Исходник Blame История 

  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. <title>Xaringan CSS Theme Generator • xaringanthemer</title>

  9. <!-- favicons --><link rel="icon" type="image/png" sizes="96x96" href="../favicon-96x96.png">

  10. <link rel="icon" type="”image/svg+xml”" href="../favicon.svg">

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

  12. <link rel="icon" sizes="any" href="../favicon.ico">

  13. <link rel="manifest" href="../site.webmanifest">

  14. <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">

  15. <link href="../deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet">

  16. <script src="../deps/bootstrap-5.3.1/bootstrap.bundle.min.js"></script><link href="../deps/IBM_Plex_Mono-0.4.10/font.css" rel="stylesheet">

  17. <link href="../deps/Outfit-0.4.10/font.css" rel="stylesheet">

  18. <link href="../deps/font-awesome-6.5.2/css/all.min.css" rel="stylesheet">

  19. <link href="../deps/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet">

  20. <script src="../deps/headroom-0.11.0/headroom.min.js"></script><script src="../deps/headroom-0.11.0/jQuery.headroom.min.js"></script><script src="../deps/bootstrap-toc-1.0.1/bootstrap-toc.min.js"></script><script src="../deps/clipboard.js-2.0.11/clipboard.min.js"></script><script src="../deps/search-1.0.0/autocomplete.jquery.min.js"></script><script src="../deps/search-1.0.0/fuse.min.js"></script><script src="../deps/search-1.0.0/mark.min.js"></script><!-- pkgdown --><script src="../pkgdown.js"></script><link href="../extra.css" rel="stylesheet">

  21. <meta property="og:title" content="Xaringan CSS Theme Generator">

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

  23. </head>

  24. <body>

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

  26. 

  27. 

  28.     <nav class="navbar navbar-expand-lg fixed-top bg-light" data-bs-theme="light" aria-label="Site navigation"><div class="container">

  29. 

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

  31. 

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

  33. 

  34. 

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

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

  37.     </button>

  38. 

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

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

  41. <li class="active nav-item"><a class="nav-link" href="../articles/xaringanthemer.html">Features</a></li>

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

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

  44.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-themes" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Themes</button>

  45.   <ul class="dropdown-menu" aria-labelledby="dropdown-themes">

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

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

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

  49.     <li><hr class="dropdown-divider"></li>

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

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

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

  53.   </ul>

  54. </li>

  55.       </ul>

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

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

  58.   <button class="nav-link dropdown-toggle" type="button" id="dropdown-" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true"><span class="fa far fa-newspaper fa-lg"></span> </button>

  59.   <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-">

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

  61.     <li><hr class="dropdown-divider"></li>

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

  63.   </ul>

  64. </li>

  65. <li class="nav-item"><a class="external-link nav-link" href="https://github.com/gadenbuie/xaringanthemer"><span class="fa fab fa-github fa-lg"></span></a></li>

  66. <li class="nav-item"><a class="external-link nav-link" href="https://twitter.com/grrrck"><span class="fa fab fa-twitter fa-lg"></span></a></li>

  67. <li class="nav-item"><a class="external-link nav-link" href="https://www.garrickadenbuie.com"><span class="fa fas fa-home fa-lg"></span></a></li>

  68.       </ul>

  69. </div>

  70. 

  71. 

  72.   </div>

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

  74. 

  75. 

  76. 

  77. 

  78. <div class="row">

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

  80.       <img src="../logo.png" class="logo" alt=""><h1>Xaringan CSS Theme Generator</h1>

  81.             

  82.       

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

  84.       <div class="d-none name"><code>xaringanthemer.Rmd</code></div>

  85.     </div>

  86. 

  87.     

  88.     

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

  90. img { max-width: 100%; }

  91. </style>

  92. <p>Jump to: <a href="#quick-intro">Quick Intro</a>, <a href="#themes">Themes</a>, <a href="#theme-settings">Theme Settings</a>,

  93. <a href="#fonts">Fonts</a>, <a href="#colors">Colors</a>, <a href="#adding-custom-css">Adding Custom CSS</a></p>

  94. <div class="section level2">

  95. <h2 id="quick-intro">Quick Intro<a class="anchor" aria-label="anchor" href="#quick-intro"></a>

  96. </h2>

  97. <!-- Set link to theme-settings, template-variables, theme functions -->

  98. <p>First, add the <code>xaringan-themer.css</code> file to the YAML

  99. header of your xaringan slides.</p>

  100. <div class="sourceCode" id="cb1"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb1-1"><a href="#cb1-1" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span></span>

  101. <span id="cb1-2"><a href="#cb1-2" tabindex="-1"></a><span class="at">  xaringan:</span><span class="fu">:moon_reader</span><span class="kw">:</span></span>

  102. <span id="cb1-3"><a href="#cb1-3" tabindex="-1"></a><span class="at">    </span><span class="fu">css</span><span class="kw">:</span><span class="at"> xaringan-themer.css</span></span></code></pre></div>

  103. <p>Then, in a hidden chunk just after the knitr setup chunk, load

  104. <strong>xaringanthemer</strong> and try one of the <a href="#themes">theme functions</a>.</p>

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

  106. <span id="cb2-2"><a href="#cb2-2" tabindex="-1"></a><span class="in">library(xaringanthemer)</span></span>

  107. <span id="cb2-3"><a href="#cb2-3" tabindex="-1"></a><span class="in">style_mono_accent(</span></span>

  108. <span id="cb2-4"><a href="#cb2-4" tabindex="-1"></a><span class="in">  base_color = "#1c5253",</span></span>

  109. <span id="cb2-5"><a href="#cb2-5" tabindex="-1"></a><span class="in">  header_font_google = google_font("Josefin Sans"),</span></span>

  110. <span id="cb2-6"><a href="#cb2-6" tabindex="-1"></a><span class="in">  text_font_google   = google_font("Montserrat", "300", "300i"),</span></span>

  111. <span id="cb2-7"><a href="#cb2-7" tabindex="-1"></a><span class="in">  code_font_google   = google_font("Fira Mono")</span></span>

  112. <span id="cb2-8"><a href="#cb2-8" tabindex="-1"></a><span class="in">)</span></span>

  113. <span id="cb2-9"><a href="#cb2-9" tabindex="-1"></a><span class="in">```</span></span></code></pre></div>

  114. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_1c5253.png" alt="Example title and normal slides using a green xaringanthemer theme" data-external="1"></p>

  115. <div class="section level3">

  116. <h3 id="matching-ggplot-themes">Matching ggplot Themes<a class="anchor" aria-label="anchor" href="#matching-ggplot-themes"></a>

  117. </h3>

  118. <p><strong>xaringanthemer</strong> even provides a [ggplot2] theme with

  119. <code><a href="../reference/theme_xaringan.html">theme_xaringan()</a></code> that uses the colors and fonts from your

  120. slide theme. Built on the <a href="https://github.com/yixuan/showtext" class="external-link">showtext</a> package, and

  121. designed to work seamlessly with <a href="https://fonts.google.com" class="external-link">Google Fonts</a>.</p>

  122. <p>Color and fill scales are also provided for matching sequential color

  123. scales based on the primary color used in your slides. See

  124. <code><a href="../reference/scale_xaringan.html">?scale_xaringan</a></code> for more details.</p>

  125. <p>More details and examples can be found in

  126. <code><a href="../articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p>

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

  128. <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>

  129. <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="op">)</span> <span class="op">+</span></span>

  130. <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">cut</span>, fill <span class="op">=</span> <span class="va">cut</span><span class="op">)</span> <span class="op">+</span></span>

  131. <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>show.legend <span class="op">=</span> <span class="cn">FALSE</span><span class="op">)</span> <span class="op">+</span></span>

  132. <span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span></span>

  133. <span>    x <span class="op">=</span> <span class="st">"Cut"</span>,</span>

  134. <span>    y <span class="op">=</span> <span class="st">"Count"</span>,</span>

  135. <span>    title <span class="op">=</span> <span class="st">"A Fancy diamonds Plot"</span></span>

  136. <span>  <span class="op">)</span> <span class="op">+</span></span>

  137. <span>  <span class="fu"><a href="../reference/theme_xaringan.html">theme_xaringan</a></span><span class="op">(</span>background_color <span class="op">=</span> <span class="st">"#FFFFFF"</span><span class="op">)</span> <span class="op">+</span></span>

  138. <span>  <span class="fu"><a href="../reference/scale_xaringan.html">scale_xaringan_fill_discrete</a></span><span class="op">(</span><span class="op">)</span></span></code></pre></div>

  139. <p><img src="../reference/figures/index-theme_xaringan_demo-1.png"></p>

  140. </div>

  141. <div class="section level3">

  142. <h3 id="tab-completion">Tab Completion<a class="anchor" aria-label="anchor" href="#tab-completion"></a>

  143. </h3>

  144. <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

  145. adjust in each of the themes!</p>

  146. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" data-external="1"></p>

  147. </div>

  148. <div class="section level3">

  149. <h3 id="r-markdown-template-in-rstudio">R Markdown Template in RStudio<a class="anchor" aria-label="anchor" href="#r-markdown-template-in-rstudio"></a>

  150. </h3>

  151. <p>You can also skip the above and just create a <em>Ninja Themed

  152. Presentation</em> from the New R Markdown Document menu in RStudio.</p>

  153. <center>

  154. <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" data-external="1">

  155. </center>

  156. </div>

  157. </div>

  158. <div class="section level2">

  159. <h2 id="themes">Themes<a class="anchor" aria-label="anchor" href="#themes"></a>

  160. </h2>

  161. <p><strong>xaringanthemer</strong> includes a number of functions that

  162. provide themed <strong>xaringan</strong> styles. All of the styling

  163. functions start with the <code>style_</code> prefix.</p>

  164. <p>The goal of each style function is to quickly set up a coordinated

  165. color palette for your slides based on one or two starter colors. Styles

  166. based on one color start with <code>style_mono_</code> and styles based

  167. on two colors start with <code>style_duo_</code>. How the starter colors

  168. are used is described in the final portion of the style function name.

  169. For example, <code><a href="../reference/style_mono_accent.html">style_mono_accent()</a></code> uses a single color as an

  170. accent color.</p>

  171. <p>Note that the colors used below are for demonstration only, the point

  172. of the <code>style_</code> functions is for you to choose your own color

  173. palette!</p>

  174. <p>If your color palette uses more than two colors, you can add

  175. additional colors with the <code>colors</code> argument. See the <a href="#colors">Colors</a> section for more information.</p>

  176. <div class="section level3">

  177. <h3 id="monotone">Monotone<a class="anchor" aria-label="anchor" href="#monotone"></a>

  178. </h3>

  179. <p>Use these functions to automatically create a consistent color

  180. palette for your slides, based around a single color.</p>

  181. <div class="section level4">

  182. <h4 id="style_mono_light">

  183. <code>style_mono_light()</code><a class="anchor" aria-label="anchor" href="#style_mono_light"></a>

  184. </h4>

  185. <p>A light theme based around a single color.</p>

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

  187. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_light.html">style_mono_light</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#23395b"</span><span class="op">)</span></span></code></pre></div>

  188. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_light.png" data-external="1"></p>

  189. </div>

  190. <div class="section level4">

  191. <h4 id="style_mono_dark">

  192. <code>style_mono_dark()</code><a class="anchor" aria-label="anchor" href="#style_mono_dark"></a>

  193. </h4>

  194. <p>A dark theme based around a single color.</p>

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

  196. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_dark.html">style_mono_dark</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#cbf7ed"</span><span class="op">)</span></span></code></pre></div>

  197. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_dark.png" data-external="1"></p>

  198. </div>

  199. <div class="section level4">

  200. <h4 id="style_mono_accent">

  201. <code>style_mono_accent()</code><a class="anchor" aria-label="anchor" href="#style_mono_accent"></a>

  202. </h4>

  203. <p>The default xaringan theme with a single color used for color accents

  204. on select elements (headers, bold text, etc.).</p>

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

  206. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_accent.html">style_mono_accent</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#43418A"</span><span class="op">)</span></span></code></pre></div>

  207. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent.png" data-external="1"></p>

  208. </div>

  209. <div class="section level4">

  210. <h4 id="style_mono_accent_inverse">

  211. <code>style_mono_accent_inverse()</code><a class="anchor" aria-label="anchor" href="#style_mono_accent_inverse"></a>

  212. </h4>

  213. <p>An “inverted” default xaringan theme with a single color used for

  214. color accents on select elements (headers, bold text, etc.).</p>

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

  216. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_mono_accent_inverse.html">style_mono_accent_inverse</a></span><span class="op">(</span>base_color <span class="op">=</span> <span class="st">"#3C989E"</span><span class="op">)</span></span></code></pre></div>

  217. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_mono_accent_inverse.png" data-external="1"></p>

  218. </div>

  219. </div>

  220. <div class="section level3">

  221. <h3 id="duotone">Duotone<a class="anchor" aria-label="anchor" href="#duotone"></a>

  222. </h3>

  223. <p>These themes build from two (ideally) complementary colors.</p>

  224. <div class="section level4">

  225. <h4 id="style_duo">

  226. <code>style_duo()</code><a class="anchor" aria-label="anchor" href="#style_duo"></a>

  227. </h4>

  228. <p>A two-colored theme based on a primary and secondary color.</p>

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

  230. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_duo.html">style_duo</a></span><span class="op">(</span>primary_color <span class="op">=</span> <span class="st">"#1F4257"</span>, secondary_color <span class="op">=</span> <span class="st">"#F97B64"</span><span class="op">)</span></span></code></pre></div>

  231. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo.png" data-external="1"></p>

  232. </div>

  233. <div class="section level4">

  234. <h4 id="style_duo_accent">

  235. <code>style_duo_accent()</code><a class="anchor" aria-label="anchor" href="#style_duo_accent"></a>

  236. </h4>

  237. <p>The default Xaringan theme with two accent colors.</p>

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

  239. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_duo_accent.html">style_duo_accent</a></span><span class="op">(</span>primary_color <span class="op">=</span> <span class="st">"#035AA6"</span>, secondary_color <span class="op">=</span> <span class="st">"#03A696"</span><span class="op">)</span></span></code></pre></div>

  240. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent.png" data-external="1"></p>

  241. </div>

  242. <div class="section level4">

  243. <h4 id="style_duo_accent_inverse">

  244. <code>style_duo_accent_inverse()</code><a class="anchor" aria-label="anchor" href="#style_duo_accent_inverse"></a>

  245. </h4>

  246. <p>An “inverted” default Xaringan theme with two accent colors.</p>

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

  248. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_duo_accent_inverse.html">style_duo_accent_inverse</a></span><span class="op">(</span>primary_color <span class="op">=</span> <span class="st">"#035AA6"</span>, secondary_color <span class="op">=</span> <span class="st">"#03A696"</span><span class="op">)</span></span></code></pre></div>

  249. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_duo_accent_inverse.png" data-external="1"></p>

  250. </div>

  251. </div>

  252. <div class="section level3">

  253. <h3 id="solarized">Solarized<a class="anchor" aria-label="anchor" href="#solarized"></a>

  254. </h3>

  255. <p>There are also two themes based around the <a href="https://ethanschoonover.com/solarized/" class="external-link">solarized color

  256. palette</a>, <code><a href="../reference/style_solarized_light.html">style_solarized_light()</a></code> and

  257. <code><a href="../reference/style_solarized_dark.html">style_solarized_dark()</a></code>. For both themes, it is advisted to

  258. change the syntax highlighting theme to <code>solarized-light</code> or

  259. <code>solarized-dark</code> (looks great paired or constrasted).</p>

  260. <div class="section level4">

  261. <h4 id="style_solarized_light">

  262. <code>style_solarized_light()</code><a class="anchor" aria-label="anchor" href="#style_solarized_light"></a>

  263. </h4>

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

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

  266. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_light.png" data-external="1"></p>

  267. </div>

  268. <div class="section level4">

  269. <h4 id="style_solarized_dark">

  270. <code>style_solarized_dark()</code><a class="anchor" aria-label="anchor" href="#style_solarized_dark"></a>

  271. </h4>

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

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

  274. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example_solarized_dark.png" data-external="1"></p>

  275. <p>To do this, your YAML header should look more-or-less like this:</p>

  276. <div class="sourceCode" id="cb13"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb13-1"><a href="#cb13-1" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span></span>

  277. <span id="cb13-2"><a href="#cb13-2" tabindex="-1"></a><span class="at">  xaringan:</span><span class="fu">:moon_reader</span><span class="kw">:</span></span>

  278. <span id="cb13-3"><a href="#cb13-3" tabindex="-1"></a><span class="at">    </span><span class="fu">css</span><span class="kw">:</span><span class="at"> </span><span class="kw">[</span><span class="st">"xaringan-themer.css"</span><span class="kw">]</span></span>

  279. <span id="cb13-4"><a href="#cb13-4" tabindex="-1"></a><span class="at">    </span><span class="fu">nature</span><span class="kw">:</span></span>

  280. <span id="cb13-5"><a href="#cb13-5" tabindex="-1"></a><span class="at">      </span><span class="fu">highlightStyle</span><span class="kw">:</span><span class="at"> solarized-dark</span></span>

  281. <span id="cb13-6"><a href="#cb13-6" tabindex="-1"></a><span class="at">      </span><span class="fu">highlightLines</span><span class="kw">:</span><span class="at"> </span><span class="ch">true</span></span>

  282. <span id="cb13-7"><a href="#cb13-7" tabindex="-1"></a><span class="at">      </span><span class="fu">countIncrementalSlides</span><span class="kw">:</span><span class="at"> </span><span class="ch">false</span></span></code></pre></div>

  283. </div>

  284. </div>

  285. </div>

  286. <div class="section level2">

  287. <h2 id="theme-settings">Theme Settings<a class="anchor" aria-label="anchor" href="#theme-settings"></a>

  288. </h2>

  289. <p>The theme functions listed above are just wrappers around the central

  290. function of this package, <code><a href="../reference/style_xaringan.html">style_xaringan()</a></code>. If you want to

  291. start from the default <strong>xaringan</strong> theme and make a few

  292. modifications, start there.</p>

  293. <p>All of the theme template variables are repeated in each of the theme

  294. functions (instead of relying on <code>...</code>) so that you can use

  295. autocompletion to find and change the defaults for any theme function.

  296. To override the default value of any theme functions, set the

  297. appropriate argument in the theme function. A table of all template

  298. variables is included in <a href="template-variables.html"><code>vignette("template-variables", "xaringanthemer")</code></a>.</p>

  299. <p>As an example, try loading <code>xaringanthemer</code>, type out

  300. <code>style_duo_theme(</code> and then press <kbd>Tab</kbd> to see all

  301. of the theme options.</p>

  302. <p>All of the theme options are named so that you first think of the

  303. element you want to change, then the property of that element.</p>

  304. <p>Here are some of the <code>text_</code> theme options:</p>

  305. <ul>

  306. <li><code>text_color</code></li>

  307. <li><code>text_bold_color</code></li>

  308. <li><code>text_slide_number_color</code></li>

  309. <li><code>text_font_size</code></li>

  310. <li><code>text_slide_number_font_size</code></li>

  311. <li><em>and more …</em></li>

  312. </ul>

  313. <p>And here are the title slide theme options:</p>

  314. <ul>

  315. <li><code>title_slide_text_color</code></li>

  316. <li><code>title_slide_background_color</code></li>

  317. <li><code>title_slide_background_image</code></li>

  318. <li><code>title_slide_background_size</code></li>

  319. <li><code>title_slide_background_position</code></li>

  320. </ul>

  321. </div>

  322. <div class="section level2">

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

  324. </h2>

  325. <!-- Need to set [adding-custom-css] -->

  326. <p><link href="https://fonts.googleapis.com/css2?family=Cabin:wght@600&amp;family=Noto+Sans&amp;display=swap" rel="stylesheet"></p>

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

  328. .cabin {

  329.   font-family: Cabin;

  330.   font-weight: 600

  331. }

  332. .noto-sans {

  333.   font-family: 'Noto Sans';

  334. }

  335. .font-preview {

  336.   padding: 1em;

  337.   margin-top: 1em;

  338.   margin-bottom: 1em;

  339.   border: 1px solid #dddddd;

  340.   border-radius: 3px;

  341.   font-size: 1.25em;

  342. }

  343. </style>

  344. <div class="section level3">

  345. <h3 id="default-fonts">Default Fonts<a class="anchor" aria-label="anchor" href="#default-fonts"></a>

  346. </h3>

  347. <p>The default heading and body fonts used in

  348. <strong>xaringanthemer</strong> are different than the xaringan default

  349. fonts. In xaringanthemer, <a href="https://fonts.google.com/specimen/Cabin" class="external-link">Cabin</a> is used for

  350. headings and <a href="https://fonts.google.com/specimen/Noto+Sans" class="external-link">Noto

  351. Sans</a> for body text.</p>

  352. <div class="font-preview">

  353. <p style="font-size: 1.5em" class="cabin">

  354. A Cabin in the Clearing

  355. </p>

  356. <p class="noto-sans">

  357. Pack my box with five dozen liquor jugs. Amazingly few discotheques

  358. provide jukeboxes.

  359. </p>

  360. </div>

  361. <p>These fonts are easier to read on screens and at a distance during

  362. presentations, and they support a wide variety of languages and weights.

  363. Another reason for the change is that the xaringan (remarkjs) default

  364. body font, <em>Droid Serif</em>, is no longer officially included in

  365. Google Fonts.</p>

  366. <p>If you would like to use the fonts from the <a href="https://slides.yihui.org/xaringan/" class="external-link">default xaringan theme</a>,

  367. you can use the following arguments in your style function.</p>

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

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

  370. <span>  text_font_family <span class="op">=</span> <span class="st">"Droid Serif"</span>,</span>

  371. <span>  text_font_url <span class="op">=</span> <span class="st">"https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic"</span>,</span>

  372. <span>  header_font_google <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Yanone Kaffeesatz"</span><span class="op">)</span></span>

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

  374. </div>

  375. <div class="section level3">

  376. <h3 id="custom-and-google-font-fonts">Custom and <em>Google Font</em> Fonts<a class="anchor" aria-label="anchor" href="#custom-and-google-font-fonts"></a>

  377. </h3>

  378. <p><strong>xaringanthemer</strong> makes it easy to use <a href="https://fonts.google.com" class="external-link">Google Fonts</a> in your presentations

  379. (provided you have an internet connection during the presentation) or to

  380. fully specify your font files.</p>

  381. <p>To use <a href="https://fonts.google.com" class="external-link">Google Fonts</a>, set the

  382. <code>&lt;type&gt;_font_google</code> theme arguments –

  383. <code>text_font_google</code>, <code>header_font_google</code>,

  384. <code>code_font_google</code> — using the <code><a href="../reference/google_font.html">google_font()</a></code>

  385. helper. The help documentation in <code><a href="../reference/google_font.html">?google_font</a></code> provides

  386. more info.</p>

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

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

  389. <span>  header_font_google <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Josefin Slab"</span>, <span class="st">"600"</span><span class="op">)</span>,</span>

  390. <span>  text_font_google   <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Work Sans"</span>, <span class="st">"300"</span>, <span class="st">"300i"</span><span class="op">)</span>,</span>

  391. <span>  code_font_google   <span class="op">=</span> <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"IBM Plex Mono"</span><span class="op">)</span></span>

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

  393. <p>If you set an <code>&lt;type&gt;_font_google</code> theme arguments,

  394. then <code>&lt;type&gt;_font_family</code>,

  395. <code>&lt;type&gt;_font_weight</code> and

  396. <code>&lt;type&gt;_font_url</code> are overwritten – where

  397. <code>&lt;type&gt;</code> is one of <code>header</code>,

  398. <code>text</code>, or <code>code</code>.</p>

  399. <p>To use a font hosted outside of Google fonts, you need to provide

  400. both <code>&lt;type&gt;_font_family</code> and

  401. <code>&lt;type&gt;_font_url</code>. For example, suppose you want to use

  402. a code font with ligatures for your code chunks, such as <a href="https://github.com/tonsky/FiraCode" class="external-link">Fira Code</a>, which would be

  403. declared with <code>code_font_family</code>. The <a href="https://github.com/tonsky/FiraCode#browser-support" class="external-link">browser

  404. usage</a> section of the Fira Code README provides a CSS URL to be used

  405. with an <code>@import</code> statement that you can use with the

  406. <code>code_font_url</code> argument.</p>

  407. <div class="sourceCode" id="cb16"><pre class="downlit sourceCode r">

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

  409. <span>  code_font_family <span class="op">=</span> <span class="st">"Fira Code"</span>,</span>

  410. <span>  code_font_url <span class="op">=</span> <span class="st">"https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css"</span></span>

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

  412. <p>Remember that you need to supply either

  413. <code>&lt;type&gt;_google_font</code> using the

  414. <code><a href="../reference/google_font.html">google_font()</a></code> helper <em>or both</em>

  415. <code>&lt;type&gt;_font_family</code> and

  416. <code>&lt;type&gt;_font_url</code>.</p>

  417. </div>

  418. <div class="section level3">

  419. <h3 id="using-additional-fonts">Using Additional Fonts<a class="anchor" aria-label="anchor" href="#using-additional-fonts"></a>

  420. </h3>

  421. <p>If you want to use additional fonts for use in <a href="#adding-custom-css">custom CSS definitions</a>, use the

  422. <code>extra_fonts</code> argument to pass a list of URLs or

  423. <code><a href="../reference/google_font.html">google_font()</a></code>s. Notice that you will need to add custom CSS

  424. (for example, via <code>extra_css</code>) to use the fonts imported in

  425. <code>extra_fonts</code>.</p>

  426. <div class="sourceCode" id="cb17"><pre class="downlit sourceCode r">

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

  428. <span>  extra_fonts <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>

  429. <span>    <span class="fu"><a href="../reference/google_font.html">google_font</a></span><span class="op">(</span><span class="st">"Sofia"</span><span class="op">)</span>,</span>

  430. <span>    <span class="co"># Young Serif by uplaod.fr</span></span>

  431. <span>    <span class="st">"https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css"</span>,</span>

  432. <span>  <span class="op">)</span>,</span>

  433. <span>  extra_css <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>

  434. <span>    <span class="st">".title-slide h2"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"font-family"</span> <span class="op">=</span> <span class="st">"Sofia"</span><span class="op">)</span>,</span>

  435. <span>    blockquote <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"font-family"</span> <span class="op">=</span> <span class="st">"youngserifregular"</span><span class="op">)</span></span>

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

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

  438. </div>

  439. </div>

  440. <div class="section level2">

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

  442. </h2>

  443. <p>When designing your xaringan theme, you may have additional colors in

  444. your desired color palette beyond those used in the accent colors of the

  445. mono and duotone styles.</p>

  446. <p>The <code>style*()</code> functions in xaringanthemer include a

  447. <code>colors</code> argument that lets you quickly define additional

  448. colors to use in your slides. This argument takes a vector of named

  449. colors</p>

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

  451. <code class="sourceCode R"><span><span class="va">colors</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/c.html" class="external-link">c</a></span><span class="op">(</span></span>

  452. <span>  red <span class="op">=</span> <span class="st">"#f34213"</span>,</span>

  453. <span>  purple <span class="op">=</span> <span class="st">"#3e2f5b"</span>,</span>

  454. <span>  orange <span class="op">=</span> <span class="st">"#ff8811"</span>,</span>

  455. <span>  green <span class="op">=</span> <span class="st">"#136f63"</span>,</span>

  456. <span>  white <span class="op">=</span> <span class="st">"#FFFFFF"</span></span>

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

  458. <p>and creates CSS classes from the color name that set the text color —

  459. e.g. <code>.red</code> — or that set the background color —

  460. e.g. <code>.bg-red</code>. If you use custom CSS in your slides, the

  461. color name is also stored in a CSS variable —

  462. e.g. <code>var(--red)</code>.</p>

  463. <p>So slide text like this</p>

  464. <div class="sourceCode" id="cb19"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb19-1"><a href="#cb19-1" tabindex="-1"></a>This **.red[simple]** .white.bg-purple<span class="co">[</span><span class="ot">demo</span><span class="co">]</span> </span>

  465. <span id="cb19-2"><a href="#cb19-2" tabindex="-1"></a>_.orange[shows]_ the colors .green<span class="co">[</span><span class="ot">in action</span><span class="co">]</span>.</span></code></pre></div>

  466. <p>will be rendered in HTML as</p>

  467. <blockquote>

  468. This <strong><span style="color: #f34213">simple</span></strong> <span style="color:#FFFFFF;background-color:#3e2f5b;">demo</span>

  469. <em style="color:#ff8811">shows</em> the colors <span style="color:#136f63">in action</span>.

  470. </blockquote>

  471. <p>Note that the color names in <code>colors</code> need to be valid CSS

  472. names, so <code>"purple-light"</code> will work, but

  473. <code>"purple light"</code> will not.</p>

  474. </div>

  475. <div class="section level2">

  476. <h2 id="adding-custom-css">Adding Custom CSS<a class="anchor" aria-label="anchor" href="#adding-custom-css"></a>

  477. </h2>

  478. <p>You can also add custom CSS classes using the <code>extra_css</code>

  479. argument in the theme functions. This argument takes a named list of CSS

  480. definitions each containing a named list of CSS property-value

  481. pairs.</p>

  482. <div class="sourceCode" id="cb20"><pre class="downlit sourceCode r">

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

  484. <span>  <span class="st">".small"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span><span class="st">"font-size"</span> <span class="op">=</span> <span class="st">"90%"</span><span class="op">)</span>,</span>

  485. <span>  <span class="st">".full-width"</span> <span class="op">=</span> <span class="fu"><a href="https://rdrr.io/r/base/list.html" class="external-link">list</a></span><span class="op">(</span></span>

  486. <span>    display <span class="op">=</span> <span class="st">"flex"</span>,</span>

  487. <span>    width   <span class="op">=</span> <span class="st">"100%"</span>,</span>

  488. <span>    flex    <span class="op">=</span> <span class="st">"1 1 auto"</span></span>

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

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

  491. <p>If you would rather keep your additional css definitions in a

  492. separate file, you can call <code><a href="../reference/style_extra_css.html">style_extra_css()</a></code> separately.

  493. Just be sure to include your new CSS file in the list of applied files

  494. in your YAML header.</p>

  495. <div class="sourceCode" id="cb21"><pre class="downlit sourceCode r">

  496. <code class="sourceCode R"><span><span class="fu"><a href="../reference/style_extra_css.html">style_extra_css</a></span><span class="op">(</span>css <span class="op">=</span> <span class="va">extra_css</span>, outfile <span class="op">=</span> <span class="st">"custom.css"</span><span class="op">)</span></span></code></pre></div>

  497. <div class="sourceCode" id="cb22"><pre class="sourceCode css"><code class="sourceCode css"><span id="cb22-1"><a href="#cb22-1" tabindex="-1"></a><span class="co">/* Extra CSS */</span></span>

  498. <span id="cb22-2"><a href="#cb22-2" tabindex="-1"></a><span class="fu">.small</span> {</span>

  499. <span id="cb22-3"><a href="#cb22-3" tabindex="-1"></a>  <span class="kw">font-size</span><span class="ch">:</span> <span class="dv">90</span><span class="dt">%</span><span class="op">;</span></span>

  500. <span id="cb22-4"><a href="#cb22-4" tabindex="-1"></a>}</span>

  501. <span id="cb22-5"><a href="#cb22-5" tabindex="-1"></a><span class="fu">.full-width</span> {</span>

  502. <span id="cb22-6"><a href="#cb22-6" tabindex="-1"></a>  <span class="kw">display</span><span class="ch">:</span> <span class="dv">flex</span><span class="op">;</span></span>

  503. <span id="cb22-7"><a href="#cb22-7" tabindex="-1"></a>  <span class="kw">width</span><span class="ch">:</span> <span class="dv">100</span><span class="dt">%</span><span class="op">;</span></span>

  504. <span id="cb22-8"><a href="#cb22-8" tabindex="-1"></a>  <span class="kw">flex</span><span class="ch">:</span> <span class="dv">1</span> <span class="dv">1</span> <span class="bu">auto</span><span class="op">;</span></span>

  505. <span id="cb22-9"><a href="#cb22-9" tabindex="-1"></a>}</span></code></pre></div>

  506. <p>This is most helpful when wanting to define helper classes to work

  507. with the <a href="https://github.com/gnab/remark" class="external-link">remark.js</a>

  508. <code>.class[]</code> syntax. Using the above example, we could add

  509. slide text <code>.small[in smaller font size]</code>.</p>

  510. <hr>

  511. <p><strong>xaringanthemer</strong> was built by <a href="https://www.garrickadenbuie.com" class="external-link">Garrick Aden-Buie</a> (<a href="https://twitter.com/grrrck" class="external-link">@grrrck</a>).</p>

  512. <p>Big thank you to <a href="https://yihui.org/" class="external-link">Yihui Xie</a>,

  513. especially for <a href="https://github.com/yihui/xaringan" class="external-link">xaringan</a>.

  514. Also thanks to <a href="https://gnab.org/" class="external-link">Ole Petter Bang</a> for <a href="https://github.com/gnab/remark" class="external-link">remark.js</a>.</p>

  515. <p>Feel free to <a href="https://github.com/gadenbuie/xaringanthemer/issues" class="external-link">file an

  516. issue</a> if you find a bug or have a theme suggestion – or better yet,

  517. submit a pull request!</p>

  518. </div>

  519.   </main><aside class="col-md-3"><nav id="toc" aria-label="Table of contents"><h2>On this page</h2>

  520.     </nav></aside>

  521. </div>

  522. 

  523. 

  524. 

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

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

  527. </div>

  528. 

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

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

  531. </div>

  532. 

  533.     </footer>

  534. </div>

  535. 

  536. 

  537. 

  538.   <script src="../doc-versions.js"></script>

  539. </body>

  540. </html>