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

262 lines
18KB
Исходник 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. <meta name="description" content="Give your xaringan slides some style with xaringanthemer.

  9. Easy slide and plot themes for xaringan slides.

  10. ">

  11. <title>Custom xaringan CSS Themes • xaringanthemer</title>

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

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

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

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

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

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

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

  19. <link href="deps/bootstrap-5.1.0/bootstrap.min.css" rel="stylesheet">

  20. <script src="deps/bootstrap-5.1.0/bootstrap.bundle.min.js"></script><link href="deps/_IBM%20Plex%20Mono-0.4.0/font.css" rel="stylesheet">

  21. <!-- 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">

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

  23. <!-- 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">

  24. <meta property="og:title" content="Custom xaringan CSS Themes">

  25. <meta property="og:description" content="Give your xaringan slides some style with xaringanthemer.

  26. Easy slide and plot themes for xaringan slides.

  27. ">

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

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

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

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

  32. <!-- 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]>

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

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

  35. <![endif]-->

  36. </head>

  37. <body>

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

  39.     

  40. 

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

  42.     

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

  44. 

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

  46. 

  47.     

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

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

  50.     </button>

  51. 

  52.     <div id="navbar" class="collapse navbar-collapse ms-2">

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

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

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

  56. </li>

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

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

  59. </li>

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

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

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

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

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

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

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

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

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

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

  70.   </div>

  71. </li>

  72.       </ul>

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

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

  75. </form>

  76. 

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

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

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

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

  81.      

  82.     

  83.   </a>

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

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

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

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

  88.   </div>

  89. </li>

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

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

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

  93.      

  94.   </a>

  95. </li>

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

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

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

  99.      

  100.   </a>

  101. </li>

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

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

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

  105.      

  106.   </a>

  107. </li>

  108.       </ul>

  109. </div>

  110. 

  111.     

  112.   </div>

  113. </nav><div class="container template-home">

  114. <div class="row">

  115.   <main id="main" class="col-md-9"><div class="section level1">

  116. <div class="page-header">

  117. <img src="logo.png" class="logo" alt=""><h1 id="xaringanthemer-">xaringanthemer <a class="anchor" aria-label="anchor" href="#xaringanthemer-"></a>

  118. </h1>

  119. </div>

  120. <!-- badges: start -->

  121. 

  122. <p>Give your <a href="https://github.com/yihui/xaringan" class="external-link">xaringan</a> slides some style with <strong>xaringanthemer</strong> within your <code>slides.Rmd</code> file without (much) CSS.</p>

  123. <p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes"></p>

  124. <div class="section level2">

  125. <h2 id="installation">Installation<a class="anchor" aria-label="anchor" href="#installation"></a>

  126. </h2>

  127. <p>You can install <strong>xaringanthemer</strong> from CRAN</p>

  128. <div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">

  129. <code class="sourceCode R"><span class="fu"><a href="https://rdrr.io/r/utils/install.packages.html" class="external-link">install.packages</a></span><span class="op">(</span><span class="st">"xaringanthemer"</span><span class="op">)</span></code></pre></div>

  130. <p>or you can install the development version of xaringanthemer from <a href="https://github.com/gadenbuie/xaringanthemer" class="external-link">GitHub</a>.</p>

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

  132. <code class="sourceCode R"><span class="co"># install.packages("remotes")</span>

  133. <span class="fu">remotes</span><span class="fu">::</span><span class="fu">install_github</span><span class="op">(</span><span class="st">"gadenbuie/xaringanthemer"</span><span class="op">)</span></code></pre></div>

  134. </div>

  135. <div class="section level2">

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

  137. </h2>

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

  139. <p>First, add the <code>xaringan-themer.css</code> file to the YAML header of your xaringan slides.</p>

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

  141. <span id="cb3-2"><a href="#cb3-2"></a><span class="at">  xaringan:</span><span class="fu">:moon_reader</span><span class="kw">:</span></span>

  142. <span id="cb3-3"><a href="#cb3-3"></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>

  143. <p>Then, in a hidden chunk just after the knitr setup chunk, load <strong>xaringanthemer</strong> and try one of the <a href="#themes">theme functions</a>.</p>

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

  145. <span id="cb4-2"><a href="#cb4-2"></a><span class="bn">library(xaringanthemer)</span></span>

  146. <span id="cb4-3"><a href="#cb4-3"></a><span class="bn">style_mono_accent(</span></span>

  147. <span id="cb4-4"><a href="#cb4-4"></a><span class="bn">  base_color = "#1c5253",</span></span>

  148. <span id="cb4-5"><a href="#cb4-5"></a><span class="bn">  header_font_google = google_font("Josefin Sans"),</span></span>

  149. <span id="cb4-6"><a href="#cb4-6"></a><span class="bn">  text_font_google   = google_font("Montserrat", "300", "300i"),</span></span>

  150. <span id="cb4-7"><a href="#cb4-7"></a><span class="bn">  code_font_google   = google_font("Fira Mono")</span></span>

  151. <span id="cb4-8"><a href="#cb4-8"></a><span class="bn">)</span></span>

  152. <span id="cb4-9"><a href="#cb4-9"></a><span class="bn">```</span></span></code></pre></div>

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

  154. <div class="section level3">

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

  156. </h3>

  157. <p><strong>xaringanthemer</strong> even provides a <a href="https://ggplot2.tidyverse.org" class="external-link">ggplot2</a> theme with <code><a href="reference/theme_xaringan.html">theme_xaringan()</a></code> that uses the colors and fonts from your slide theme. Built on the <a href="https://github.com/yixuan/showtext" class="external-link">showtext</a> package, and designed to work seamlessly with <a href="https://fonts.google.com" class="external-link">Google Fonts</a>.</p>

  158. <p>Color and fill scales are also provided for matching sequential color scales based on the primary color used in your slides. See <code><a href="reference/scale_xaringan.html">?scale_xaringan</a></code> for more details.</p>

  159. <p>More details and examples can be found in <code><a href="articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p>

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

  161. <code class="sourceCode R"><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>

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

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

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

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

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

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

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

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

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

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

  172. <p><img src="reference/figures/index-theme_xaringan_demo-1.png" width="100%"></p>

  173. </div>

  174. <div class="section level3">

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

  176. </h3>

  177. <p><strong>xaringanthemer</strong> is <kbd>Tab</kbd> friendly – <a href="#theme-settings">use autocomplete to explore</a> the <a href="vignettes/template-variables.html">template variables</a> that you can adjust in each of the themes!</p>

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

  179. </div>

  180. <div class="section level3">

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

  182. </h3>

  183. <p>You can also skip the above and just create a <em>Ninja Themed Presentation</em> from the New R Markdown Document menu in RStudio.</p>

  184. <center>

  185. <p><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"></p>

  186. </center>

  187. </div>

  188. </div>

  189. <div class="section level2">

  190. <h2 id="features">Features<a class="anchor" aria-label="anchor" href="#features"></a>

  191. </h2>

  192. <p>There’s a lot more that <strong>xaringanthemer</strong> can do! <a href="https://pkg.garrickadenbuie.com/xaringanthemer/articles/xaringanthemer.html">Discover xaringanthemer’s features.</a></p>

  193. </div>

  194. </div>

  195.   </main><aside class="col-md-3"><div class="links">

  196. <h2 data-toc-skip>Links</h2>

  197. <ul class="list-unstyled">

  198. <li><a href="https://cloud.r-project.org/package=xaringanthemer" class="external-link">View on CRAN</a></li>

  199. <li><a href="https://github.com/gadenbuie/xaringanthemer/" class="external-link">Browse source code</a></li>

  200. <li><a href="https://github.com/gadenbuie/xaringanthemer/issues" class="external-link">Report a bug</a></li>

  201. </ul>

  202. </div>

  203. 

  204. <div class="license">

  205. <h2 data-toc-skip>License</h2>

  206. <ul class="list-unstyled">

  207. <li><a href="LICENSE.html">Full license</a></li>

  208. <li><small><a href="https://opensource.org/licenses/mit-license.php" class="external-link">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a></small></li>

  209. </ul>

  210. </div>

  211. 

  212. 

  213. <div class="citation">

  214. <h2 data-toc-skip>Citation</h2>

  215. <ul class="list-unstyled">

  216. <li><a href="authors.html#citation">Citing xaringanthemer</a></li>

  217. </ul>

  218. </div>

  219. 

  220. <div class="developers">

  221. <h2 data-toc-skip>Developers</h2>

  222. <ul class="list-unstyled">

  223. <li>

  224. <a href="https://www.garrickadenbuie.com" class="external-link">Garrick Aden-Buie</a> <br><small class="roles"> Author, maintainer </small> <a href="https://orcid.org/0000-0002-7111-0077" target="orcid.widget" aria-label="ORCID" class="external-link"><span class="fab fa-orcid orcid" aria-hidden="true"></span></a> </li>

  225. </ul>

  226. </div>

  227. 

  228. <div class="dev-status">

  229. <h2 data-toc-skip>Dev status</h2>

  230. <ul class="list-unstyled">

  231. <li><a href="https://CRAN.R-project.org/package=xaringanthemer" class="external-link"><img src="https://www.r-pkg.org/badges/version/xaringanthemer" alt="CRAN status"></a></li>

  232. <li><a href="https://gadenbuie.r-universe.dev" class="external-link"><img src="https://gadenbuie.r-universe.dev/badges/xaringanthemer" alt="xaringanthemer status badge"></a></li>

  233. <li><a href="https://lifecycle.r-lib.org/articles/stages.html" class="external-link"><img src="https://img.shields.io/badge/lifecycle-stable-brightgreen.svg" alt="Lifecycle: stable"></a></li>

  234. <li><a href="https://github.com/gadenbuie/xaringanthemer/actions" class="external-link"><img src="https://github.com/gadenbuie/xaringanthemer/workflows/R-CMD-check/badge.svg?branch=main" alt="R-CMD-Check status badge"></a></li>

  235. <li><a href="https://codecov.io/github/gadenbuie/xaringanthemer" class="external-link"><img src="https://img.shields.io/codecov/c/github/gadenbuie/xaringanthemer" alt="Codecov"></a></li>

  236. </ul>

  237. </div>

  238. 

  239.   </aside>

  240. </div>

  241. 

  242. 

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

  244.   <p></p>

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

  246. </div>

  247. 

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

  249.   <p></p>

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

  251. </div>

  252. 

  253.     </footer>

  254. </div>

  255. 

  256.   

  257. 

  258.   

  259. 

  260.   </body>

  261. </html>