garrick
/
xaringanthemer
réplica de https://github.com/gadenbuie/xaringanthemer.git


			
							<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Custom xaringan CSS Themes • xaringanthemer</title>
<!-- favicons --><link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="”image/svg+xml”" href="favicon.svg">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" sizes="any" href="favicon.ico">
<link rel="manifest" href="site.webmanifest">
<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">
<link href="deps/bootstrap-5.3.1/bootstrap.min.css" rel="stylesheet">
<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">
<link href="deps/Outfit-0.4.10/font.css" rel="stylesheet">
<link href="deps/font-awesome-6.5.2/css/all.min.css" rel="stylesheet">
<link href="deps/font-awesome-6.5.2/css/v4-shims.min.css" rel="stylesheet">
<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">
<meta property="og:title" content="Custom xaringan CSS Themes">
<meta name="description" content="Give your xaringan slides some style with xaringanthemer.
Easy slide and plot themes for xaringan slides.
">
<meta property="og:description" content="Give your xaringan slides some style with xaringanthemer.
Easy slide and plot themes for xaringan slides.
">
<meta property="og:image" content="https://pkg.garrickadenbuie.com/xaringanthemer/logo.png">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@grrrck">
<meta name="twitter:site" content="@grrrck">
<meta name="robots" content="noindex">
</head>
<body>
    <a href="#main" class="visually-hidden-focusable">Skip to contents</a>


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

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

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


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

    <div id="navbar" class="collapse navbar-collapse ms-3">
      <ul class="navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="articles/xaringanthemer.html">Features</a></li>
<li class="nav-item"><a class="nav-link" href="reference/index.html">Reference</a></li>
<li class="nav-item dropdown">
  <button class="nav-link dropdown-toggle" type="button" id="dropdown-themes" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">Themes</button>
  <ul class="dropdown-menu" aria-labelledby="dropdown-themes">
<li><h6 class="dropdown-header" data-toc-skip>Themes</h6></li>
    <li><a class="dropdown-item" href="articles/themes.html">Slide Themes</a></li>
    <li><a class="dropdown-item" href="articles/ggplot2-themes.html">ggplot2 Themes</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><h6 class="dropdown-header" data-toc-skip>More Customization</h6></li>
    <li><a class="dropdown-item" href="articles/fonts.html">Fonts</a></li>
    <li><a class="dropdown-item" href="articles/template-variables.html">Template Variables</a></li>
  </ul>
</li>
      </ul>
<ul class="navbar-nav">
<li class="nav-item dropdown">
  <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>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdown-">
<li><a class="external-link dropdown-item" href="https://garrickadenbuie.com/blog/xaringanthemer-v0-3-0/">xaringanthemer 0.3.0</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="news/index.html">Changelog</a></li>
  </ul>
</li>
<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>
<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>
<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>
      </ul>
</div>


  </div>
</nav><div class="container template-home">
<div class="row">
  <main id="main" class="col-md-9"><div class="section level1">
<div class="page-header">
<img src="logo.png" class="logo" alt=""><h1 id="xaringanthemer-">xaringanthemer <a class="anchor" aria-label="anchor" href="#xaringanthemer-"></a>
</h1>
</div>
<!-- badges: start -->

<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>
<p><img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes"></p>
<div class="section level2">
<h2 id="installation">Installation<a class="anchor" aria-label="anchor" href="#installation"></a>
</h2>
<p>You can install <strong>xaringanthemer</strong> from CRAN</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><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></span></code></pre></div>
<p>or you can install the development version of xaringanthemer from <a href="https://github.com/gadenbuie/xaringanthemer" class="external-link">GitHub</a>.</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="co"># install.packages("remotes")</span></span>
<span><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></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="quick-intro">Quick Intro<a class="anchor" aria-label="anchor" href="#quick-intro"></a>
</h2>
<!-- Set link to theme-settings, template-variables, theme functions -->
<p>First, add the <code>xaringan-themer.css</code> file to the YAML header of your xaringan slides.</p>
<div class="sourceCode" id="cb3"><pre class="sourceCode yaml"><code class="sourceCode yaml"><span id="cb3-1"><a href="#cb3-1" tabindex="-1"></a><span class="fu">output</span><span class="kw">:</span></span>
<span id="cb3-2"><a href="#cb3-2" tabindex="-1"></a><span class="at">  xaringan:</span><span class="fu">:moon_reader</span><span class="kw">:</span></span>
<span id="cb3-3"><a href="#cb3-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>
<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>
<div class="sourceCode" id="cb4"><pre class="sourceCode markdown"><code class="sourceCode markdown"><span id="cb4-1"><a href="#cb4-1" tabindex="-1"></a><span class="in">```{r xaringan-themer, include=FALSE, warning=FALSE}</span></span>
<span id="cb4-2"><a href="#cb4-2" tabindex="-1"></a><span class="in">library(xaringanthemer)</span></span>
<span id="cb4-3"><a href="#cb4-3" tabindex="-1"></a><span class="in">style_mono_accent(</span></span>
<span id="cb4-4"><a href="#cb4-4" tabindex="-1"></a><span class="in">  base_color = "#1c5253",</span></span>
<span id="cb4-5"><a href="#cb4-5" tabindex="-1"></a><span class="in">  header_font_google = google_font("Josefin Sans"),</span></span>
<span id="cb4-6"><a href="#cb4-6" tabindex="-1"></a><span class="in">  text_font_google   = google_font("Montserrat", "300", "300i"),</span></span>
<span id="cb4-7"><a href="#cb4-7" tabindex="-1"></a><span class="in">  code_font_google   = google_font("Fira Mono")</span></span>
<span id="cb4-8"><a href="#cb4-8" tabindex="-1"></a><span class="in">)</span></span>
<span id="cb4-9"><a href="#cb4-9" tabindex="-1"></a><span class="in">```</span></span></code></pre></div>
<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>
<div class="section level3">
<h3 id="matching-ggplot-themes">Matching ggplot Themes<a class="anchor" aria-label="anchor" href="#matching-ggplot-themes"></a>
</h3>
<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>
<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>
<p>More details and examples can be found in <code><a href="articles/ggplot2-themes.html">vignette("ggplot2-themes")</a></code>.</p>
<div class="sourceCode" id="cb5"><pre class="downlit sourceCode r">
<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>
<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>
<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>
<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>
<span>  <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/labs.html" class="external-link">labs</a></span><span class="op">(</span></span>
<span>    x <span class="op">=</span> <span class="st">"Cut"</span>,</span>
<span>    y <span class="op">=</span> <span class="st">"Count"</span>,</span>
<span>    title <span class="op">=</span> <span class="st">"A Fancy diamonds Plot"</span></span>
<span>  <span class="op">)</span> <span class="op">+</span></span>
<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>
<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>
<p><img src="reference/figures/index-theme_xaringan_demo-1.png" width="100%"></p>
</div>
<div class="section level3">
<h3 id="tab-completion">Tab Completion<a class="anchor" aria-label="anchor" href="#tab-completion"></a>
</h3>
<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>
<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>
</div>
<div class="section level3">
<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>
</h3>
<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>
<center>
<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">
</center>
</div>
</div>
<div class="section level2">
<h2 id="features">Features<a class="anchor" aria-label="anchor" href="#features"></a>
</h2>
<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>
</div>
</div>
  </main><aside class="col-md-3"><div class="links">
<h2 data-toc-skip>Links</h2>
<ul class="list-unstyled">
<li><a href="https://cloud.r-project.org/package=xaringanthemer" class="external-link">View on CRAN</a></li>
<li><a href="https://github.com/gadenbuie/xaringanthemer/" class="external-link">Browse source code</a></li>
<li><a href="https://github.com/gadenbuie/xaringanthemer/issues" class="external-link">Report a bug</a></li>
</ul>
</div>

<div class="license">
<h2 data-toc-skip>License</h2>
<ul class="list-unstyled">
<li><a href="LICENSE.html">Full license</a></li>
<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>
</ul>
</div>


<div class="citation">
<h2 data-toc-skip>Citation</h2>
<ul class="list-unstyled">
<li><a href="authors.html#citation">Citing xaringanthemer</a></li>
</ul>
</div>

<div class="developers">
<h2 data-toc-skip>Developers</h2>
<ul class="list-unstyled">
<li>
<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>
</ul>
</div>

<div class="dev-status">
<h2 data-toc-skip>Dev status</h2>
<ul class="list-unstyled">
<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>
<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>
<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>
<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>
<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>
</ul>
</div>

  </aside>
</div>


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

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

    </footer>
</div>


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