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

540 lines
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. </head>

  23. <body>

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

  25. 

  26. 

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

  28. 

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

  30. 

  31.     <small class="nav-text text-muted me-auto" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Released version">0.4.4</small>

  32. 

  33. 

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

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

  36.     </button>

  37. 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  52.   </ul>

  53. </li>

  54.       </ul>

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

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

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

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

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

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

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

  62.   </ul>

  63. </li>

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

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

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

  67.       </ul>

  68. </div>

  69. 

  70. 

  71.   </div>

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

  73. 

  74. 

  75. 

  76. 

  77. <div class="row">

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

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

  80.             

  81.       

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

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

  84.     </div>

  85. 

  86.     

  87.     

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

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

  90. </style>

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

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

  93. <div class="section level2">

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

  95. </h2>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  114. <div class="section level3">

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

  116. </h3>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  139. </div>

  140. <div class="section level3">

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

  142. </h3>

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

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

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

  146. </div>

  147. <div class="section level3">

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

  149. </h3>

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

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

  152. <center>

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

  154. </center>

  155. </div>

  156. </div>

  157. <div class="section level2">

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

  159. </h2>

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

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

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

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

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

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

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

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

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

  169. accent color.</p>

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

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

  172. palette!</p>

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

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

  175. <div class="section level3">

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

  177. </h3>

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

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

  180. <div class="section level4">

  181. <h4 id="style_mono_light">

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

  183. </h4>

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

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

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

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

  188. </div>

  189. <div class="section level4">

  190. <h4 id="style_mono_dark">

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

  192. </h4>

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

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

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

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

  197. </div>

  198. <div class="section level4">

  199. <h4 id="style_mono_accent">

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

  201. </h4>

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

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

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

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

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

  207. </div>

  208. <div class="section level4">

  209. <h4 id="style_mono_accent_inverse">

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

  211. </h4>

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

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

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

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

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

  217. </div>

  218. </div>

  219. <div class="section level3">

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

  221. </h3>

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

  223. <div class="section level4">

  224. <h4 id="style_duo">

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

  226. </h4>

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

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

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

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

  231. </div>

  232. <div class="section level4">

  233. <h4 id="style_duo_accent">

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

  235. </h4>

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

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

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

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

  240. </div>

  241. <div class="section level4">

  242. <h4 id="style_duo_accent_inverse">

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

  244. </h4>

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

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

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

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

  249. </div>

  250. </div>

  251. <div class="section level3">

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

  253. </h3>

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

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

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

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

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

  259. <div class="section level4">

  260. <h4 id="style_solarized_light">

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

  262. </h4>

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

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

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

  266. </div>

  267. <div class="section level4">

  268. <h4 id="style_solarized_dark">

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

  270. </h4>

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

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

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

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

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

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

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

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

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

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

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

  282. </div>

  283. </div>

  284. </div>

  285. <div class="section level2">

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

  287. </h2>

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

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

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

  291. modifications, start there.</p>

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

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

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

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

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

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

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

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

  300. of the theme options.</p>

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

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

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

  304. <ul>

  305. <li><code>text_color</code></li>

  306. <li><code>text_bold_color</code></li>

  307. <li><code>text_slide_number_color</code></li>

  308. <li><code>text_font_size</code></li>

  309. <li><code>text_slide_number_font_size</code></li>

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

  311. </ul>

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

  313. <ul>

  314. <li><code>title_slide_text_color</code></li>

  315. <li><code>title_slide_background_color</code></li>

  316. <li><code>title_slide_background_image</code></li>

  317. <li><code>title_slide_background_size</code></li>

  318. <li><code>title_slide_background_position</code></li>

  319. </ul>

  320. </div>

  321. <div class="section level2">

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

  323. </h2>

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

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

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

  327. .cabin {

  328.   font-family: Cabin;

  329.   font-weight: 600

  330. }

  331. .noto-sans {

  332.   font-family: 'Noto Sans';

  333. }

  334. .font-preview {

  335.   padding: 1em;

  336.   margin-top: 1em;

  337.   margin-bottom: 1em;

  338.   border: 1px solid #dddddd;

  339.   border-radius: 3px;

  340.   font-size: 1.25em;

  341. }

  342. </style>

  343. <div class="section level3">

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

  345. </h3>

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

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

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

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

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

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

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

  353. A Cabin in the Clearing

  354. </p>

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

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

  357. provide jukeboxes.

  358. </p>

  359. </div>

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

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

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

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

  364. Google Fonts.</p>

  365. <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>,

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

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

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

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

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

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

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

  373. </div>

  374. <div class="section level3">

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

  376. </h3>

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

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

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

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

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

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

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

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

  385. more info.</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  416. </div>

  417. <div class="section level3">

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

  419. </h3>

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

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

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

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

  424. <code>extra_fonts</code>.</p>

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

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

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

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

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

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

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

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

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

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

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

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

  437. </div>

  438. </div>

  439. <div class="section level2">

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

  441. </h2>

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

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

  444. mono and duotone styles.</p>

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

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

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

  448. colors</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  466. <blockquote>

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

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

  469. </blockquote>

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

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

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

  473. </div>

  474. <div class="section level2">

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

  476. </h2>

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

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

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

  480. pairs.</p>

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

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

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

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

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

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

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

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

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

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

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

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

  493. in your YAML header.</p>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  509. <hr>

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

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

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

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

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

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

  516. submit a pull request!</p>

  517. </div>

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

  519.     </nav></aside>

  520. </div>

  521. 

  522. 

  523. 

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

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

  526. </div>

  527. 

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

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

  530. </div>

  531. 

  532.     </footer>

  533. </div>

  534. 

  535. 

  536. 

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

  538. </body>

  539. </html>