garrick
/
xaringanthemer
miroir de https://github.com/gadenbuie/xaringanthemer.git
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Tickets 0 Versions 10 Wiki Activité
😎 Give your xaringan slides some style
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
500 Révisions
5 Branches
Aborescence: 9ddff12877
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '9ddff12877'
${ noResults }
xaringanthemer/dev/index.html

268 lines
17KB
Brut Annotations Historique 

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

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

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

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

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

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

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

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

  15. <!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">

  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="bootstrap-toc.css">

  17. <script src="bootstrap-toc.js"></script><!-- 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">

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

  19. <!-- 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><!-- 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><!-- pkgdown --><link href="pkgdown.css" rel="stylesheet">

  20. <script src="pkgdown.js"></script><link href="extra.css" rel="stylesheet">

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

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

  23. Easy slide and plot themes for xaringan slides.

  24. ">

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

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

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

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

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

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

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

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

  33. <![endif]-->

  34. </head>

  35. <body data-spy="scroll" data-target="#toc">

  36.     <div class="container template-home">

  37.       <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">

  38.   <div class="container">

  39.     <div class="navbar-header">

  40.       <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">

  41.         <span class="sr-only">Toggle navigation</span>

  42.         <span class="icon-bar"></span>

  43.         <span class="icon-bar"></span>

  44.         <span class="icon-bar"></span>

  45.       </button>

  46.       <span class="navbar-brand">

  47.         <a class="navbar-link" href="index.html">xaringanthemer</a>

  48.         <span class="version label label-danger" data-toggle="tooltip" data-placement="bottom" title="In-development version">0.4.0.9000</span>

  49.       </span>

  50.     </div>

  51. 

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

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

  54. <li>

  55.   <a href="articles/xaringanthemer.html">Features</a>

  56. </li>

  57. <li>

  58.   <a href="reference/index.html">Reference</a>

  59. </li>

  60. <li>

  61.   <a href="articles/themes.html">Themes</a>

  62. </li>

  63. <li>

  64.   <a href="articles/ggplot2-themes.html">ggplot2 Themes</a>

  65. </li>

  66. <li class="dropdown">

  67.   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">

  68.     More

  69.      

  70.     <span class="caret"></span>

  71.   </a>

  72.   <ul class="dropdown-menu" role="menu">

  73. <li>

  74.       <a href="articles/fonts.html">Fonts</a>

  75.     </li>

  76.     <li>

  77.       <a href="articles/template-variables.html">Template Variables</a>

  78.     </li>

  79.   </ul>

  80. </li>

  81.       </ul>

  82. <ul class="nav navbar-nav navbar-right">

  83. <li class="dropdown">

  84.   <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">

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

  86.      

  87.     

  88.      

  89.     <span class="caret"></span>

  90.   </a>

  91.   <ul class="dropdown-menu" role="menu">

  92. <li>

  93.       <a href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a>

  94.     </li>

  95.     <li class="divider">

  96.     <li>

  97.       <a href="news/index.html">Changelog</a>

  98.     </li>

  99.   </ul>

  100. </li>

  101. <li>

  102.   <a href="https://github.com/gadenbuie/xaringanthemer">

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

  104.      

  105.   </a>

  106. </li>

  107. <li>

  108.   <a href="https://twitter.com/grrrck">

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

  110.      

  111.   </a>

  112. </li>

  113. <li>

  114.   <a href="https://www.garrickadenbuie.com">

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

  116.      

  117.   </a>

  118. </li>

  119.       </ul>

  120. </div>

  121. <!--/.nav-collapse -->

  122.   </div>

  123. <!--/.container -->

  124. </div>

  125. <!--/.navbar -->

  126. 

  127.       

  128. 

  129.       </header><div class="row">

  130.   <div class="contents col-md-9">

  131. <div id="xaringanthemer-" class="section level1">

  132. <div class="page-header"><h1 class="hasAnchor">

  133. <a href="#xaringanthemer-" class="anchor"></a>xaringanthemer <img src="reference/figures/logo.png" align="right" height="175px">

  134. </h1></div>

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

  136. 

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

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

  139. <div id="installation" class="section level2">

  140. <h2 class="hasAnchor">

  141. <a href="#installation" class="anchor"></a>Installation</h2>

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

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

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

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

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

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

  148. <span class="fu">remotes</span><span class="fu">::</span><span class="fu"><a href="https://remotes.r-lib.org/reference/install_github.html">install_github</a></span><span class="op">(</span><span class="st">"gadenbuie/xaringanthemer"</span><span class="op">)</span></code></pre></div>

  149. </div>

  150. <div id="quick-intro" class="section level2">

  151. <h2 class="hasAnchor">

  152. <a href="#quick-intro" class="anchor"></a>Quick Intro</h2>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  169. <div id="matching-ggplot-themes" class="section level3">

  170. <h3 class="hasAnchor">

  171. <a href="#matching-ggplot-themes" class="anchor"></a>Matching ggplot Themes</h3>

  172. <p><strong>xaringanthemer</strong> even provides a <a href="https://ggplot2.tidyverse.org">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">showtext</a> package, and designed to work seamlessly with <a href="https://fonts.google.com">Google Fonts</a>.</p>

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

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

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

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

  177. <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/ggplot.html">ggplot</a></span><span class="op">(</span><span class="va">diamonds</span><span class="op">)</span> <span class="op">+</span>

  178.   <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">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>

  179.   <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">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>

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

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

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

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

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

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

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

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

  188. </div>

  189. <div id="tab-completion" class="section level3">

  190. <h3 class="hasAnchor">

  191. <a href="#tab-completion" class="anchor"></a>Tab Completion</h3>

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

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

  194. </div>

  195. <div id="r-markdown-template-in-rstudio" class="section level3">

  196. <h3 class="hasAnchor">

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

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

  199. <center>

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

  201. </center>

  202. </div>

  203. </div>

  204. <div id="features" class="section level2">

  205. <h2 class="hasAnchor">

  206. <a href="#features" class="anchor"></a>Features</h2>

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

  208. </div>

  209. </div>

  210.   </div>

  211. 

  212.   <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">

  213.     <div class="links">

  214. <h2>Links</h2>

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

  216. <li>Download from CRAN at <br><a href="https://cloud.r-project.org/package=xaringanthemer">https://​cloud.r-project.org/​package=xaringanthemer</a>

  217. </li>

  218. <li>Browse source code at <br><a href="https://github.com/gadenbuie/xaringanthemer/">https://​github.com/​gadenbuie/​xaringanthemer/​</a>

  219. </li>

  220. <li>Report a bug at <br><a href="https://github.com/gadenbuie/xaringanthemer/issues">https://​github.com/​gadenbuie/​xaringanthemer/​issues</a>

  221. </li>

  222. </ul>

  223. </div>

  224. <div class="license">

  225. <h2>License</h2>

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

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

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

  229. </ul>

  230. </div>

  231. <div class="developers">

  232. <h2>Developers</h2>

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

  234. <li>

  235. <a href="https://www.garrickadenbuie.com">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"><span class="fab fa-orcid orcid" aria-hidden="true"></span></a> </li>

  236. </ul>

  237. </div>

  238. 

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

  240. <h2>Dev status</h2>

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

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

  243. <li><a href="https://www.tidyverse.org/lifecycle/#stable"><img src="https://img.shields.io/badge/lifecycle-stable-brightgreen.svg" alt="Lifecycle: stable"></a></li>

  244. <li><a href="https://github.com/gadenbuie/xaringanthemer/actions"><img src="https://github.com/gadenbuie/xaringanthemer/workflows/CI%20by%20%7Btic%7D/badge.svg?branch=main" alt="CI by {tic}"></a></li>

  245. <li><a href="https://codecov.io/github/gadenbuie/xaringanthemer"><img src="https://img.shields.io/codecov/c/github/gadenbuie/xaringanthemer" alt="Codecov"></a></li>

  246. </ul>

  247. </div>

  248. </div>

  249. </div>

  250. 

  251. 

  252.       <footer><div class="copyright">

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

  254. </div>

  255. 

  256. <div class="pkgdown">

  257.   <p>Site built with <a href="https://pkgdown.r-lib.org/">pkgdown</a> 1.6.1.</p>

  258. </div>

  259. 

  260.       </footer>

  261. </div>

  262. 

  263.   

  264. 

  265. 

  266.   </body>

  267. </html>