garrick
/
xaringanthemer
огледало од https://github.com/gadenbuie/xaringanthemer.git
Прати 1
Волим 0
Креирај огранак 0
Код Дискусије 0 Издања 10 Вики Activity
😎 Give your xaringan slides some style
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 Комити
5 Гране
Дрво: 1d5987a39c
Гране Ознаке
${ item.name }
Create branch ${ searchTerm }
from '1d5987a39c'
${ noResults }
xaringanthemer/dev/index.html

231 lines
14KB
Датотека 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.0">

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

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

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

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

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

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

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

  15. <meta property="og:title" content="Custom Xaringan CSS Themes">

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

  17. Easy slide and plot themes for xaringan slides.

  18. ">

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

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

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

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

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

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

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

  26. <![endif]-->

  27. </head>

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

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

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

  31.   <div class="container">

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

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

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

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

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

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

  38.       </button>

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

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

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

  42.       </span>

  43.     </div>

  44. 

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

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

  47. <li>

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

  49. </li>

  50. <li>

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

  52. </li>

  53. <li>

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

  55. </li>

  56. <li>

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

  58. </li>

  59. <li>

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

  61. </li>

  62.       </ul>

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

  64. <li>

  65.   <a href="news/index.html">

  66.     <span class="fa fa fa fa-newspaper-o fa-lg"></span>

  67.      

  68.     

  69.   </a>

  70. </li>

  71. <li>

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

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

  74.      

  75.   </a>

  76. </li>

  77. <li>

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

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

  80.      

  81.   </a>

  82. </li>

  83. <li>

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

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

  86.      

  87.   </a>

  88. </li>

  89.       </ul>

  90. </div>

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

  92.   </div>

  93. <!--/.container -->

  94. </div>

  95. <!--/.navbar -->

  96. 

  97.       

  98. 

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

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

  101. <div id="xaringanthemer" class="section level1">

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

  103. <a href="#xaringanthemer" class="anchor"></a>xaringanthemer</h1></div>

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

  105. 

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

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

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

  109. <h2 class="hasAnchor">

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

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

  112. <div class="sourceCode" id="cb1"><pre class="r"><span class="fu"><a href="https://rdrr.io/r/utils/install.packages.html">install.packages</a></span>(<span class="st">"xaringanthemer"</span>)</pre></div>

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

  114. <div class="sourceCode" id="cb2"><pre class="r"><span class="co"># install.packages("remotes")</span>

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

  116. </div>

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

  118. <h2 class="hasAnchor">

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

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

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

  122. <div class="sourceCode" id="cb3"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb3-1" data-line-number="1"><span class="fu">output:</span></a>

  123. <a class="sourceLine" id="cb3-2" data-line-number="2">  <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>

  124. <a class="sourceLine" id="cb3-3" data-line-number="3">    <span class="fu">css:</span><span class="at"> xaringan-themer.css</span></a></code></pre></div>

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

  126. <div class="sourceCode" id="cb4"><pre class="sourceCode markdown"><code class="sourceCode markdown"><a class="sourceLine" id="cb4-1" data-line-number="1">```{r xaringan-themer, include = FALSE}</a>

  127. <a class="sourceLine" id="cb4-2" data-line-number="2">library(xaringanthemer)</a>

  128. <a class="sourceLine" id="cb4-3" data-line-number="3">style_mono_light(</a>

  129. <a class="sourceLine" id="cb4-4" data-line-number="4">  base_color = "#1c5253",</a>

  130. <a class="sourceLine" id="cb4-5" data-line-number="5">  header_font_google = google_font("Josefin Sans"),</a>

  131. <a class="sourceLine" id="cb4-6" data-line-number="6">  text_font_google   = google_font("Montserrat", "300", "300i"),</a>

  132. <a class="sourceLine" id="cb4-7" data-line-number="7">  code_font_google   = google_font("Droid Mono")</a>

  133. <a class="sourceLine" id="cb4-8" data-line-number="8">)</a>

  134. <a class="sourceLine" id="cb4-9" data-line-number="9">```</a></code></pre></div>

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

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

  137. <h3 class="hasAnchor">

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

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

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

  141. <div class="sourceCode" id="cb5"><pre class="r"><span class="fu"><a href="https://rdrr.io/r/base/library.html">library</a></span>(<span class="no">ggplot2</span>)

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

  143.   <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/aes.html">aes</a></span>(<span class="no">cut</span>, <span class="kw">fill</span> <span class="kw">=</span> <span class="no">cut</span>) +

  144.   <span class="fu"><a href="https://ggplot2.tidyverse.org/reference/geom_bar.html">geom_bar</a></span>(<span class="kw">show.legend</span> <span class="kw">=</span> <span class="fl">FALSE</span>) +

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

  146.     <span class="kw">x</span> <span class="kw">=</span> <span class="st">"Cut"</span>,

  147.     <span class="kw">y</span> <span class="kw">=</span> <span class="st">"Count"</span>,

  148.     <span class="kw">title</span> <span class="kw">=</span> <span class="st">"A Fancy diamonds Plot"</span>

  149.   ) +

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

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

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

  153. </div>

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

  155. <h3 class="hasAnchor">

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

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

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

  159. </div>

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

  161. <h3 class="hasAnchor">

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

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

  164. <center>

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

  166. </center>

  167. </div>

  168. </div>

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

  170. <h2 class="hasAnchor">

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

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

  173. </div>

  174. </div>

  175.   </div>

  176. 

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

  178.     <div class="links">

  179. <h2>Links</h2>

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

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

  182. </li>

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

  184. </li>

  185. </ul>

  186. </div>

  187. <div class="license">

  188. <h2>License</h2>

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

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

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

  192. </ul>

  193. </div>

  194. <div class="developers">

  195. <h2>Developers</h2>

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

  197. <li>

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

  199. </ul>

  200. </div>

  201. 

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

  203. <h2>Dev status</h2>

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

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

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

  207. <li><a href="https://travis-ci.com/gadenbuie/xaringanthemer"><img src="https://travis-ci.com/gadenbuie/xaringanthemer.svg?branch=master" alt="travis"></a></li>

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

  209. </ul>

  210. </div>

  211. </div>

  212. </div>

  213. 

  214. 

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

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

  217. </div>

  218. 

  219. <div class="pkgdown">

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

  221. </div>

  222. 

  223.       </footer>

  224. </div>

  225. 

  226.   

  227. 

  228. 

  229.   </body>

  230. </html>