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

180 lines
8.7KB

  1. <!DOCTYPE html>
  2. <!-- Generated by pkgdown: do not edit by hand --><html>
  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>Xaringan CSS Theme Generator • xaringanthemer</title>
  9. <!-- jquery --><script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha384-nrOSfDHtoPMzJHjVTdCopGqIqeYETSXhZDFyniQ8ZHcVy08QesyHcnOUpMpqnmWq" crossorigin="anonymous"></script><!-- Bootstrap --><link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  10. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script><!-- Font Awesome icons --><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">
  11. <!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js" integrity="sha384-cV+rhyOuRHc9Ub/91rihWcGmMmCXDeksTtCihMupQHSsi8GIIRDG0ThDc3HGQFJ3" crossorigin="anonymous"></script><!-- pkgdown --><link href="pkgdown.css" rel="stylesheet">
  12. <script src="jquery.sticky-kit.min.js"></script><script src="pkgdown.js"></script><meta property="og:title" content="Xaringan CSS Theme Generator">
  13. <meta property="og:description" content="Create and edit your xaringan CSS files from within your R
  14. R Markdown slide source. More technically, this package actually creates
  15. valid remarkjs CSS themes that are easily used by xarangan.">
  16. <meta name="twitter:card" content="summary">
  17. <!-- mathjax --><script src="https://mathjax.rstudio.com/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script><!--[if lt IE 9]>
  18. <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  19. <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  20. <![endif]-->
  21. </head>
  22. <body>
  23. <div class="container template-article">
  24. <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  25. <div class="container">
  26. <div class="navbar-header">
  27. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
  28. <span class="icon-bar"></span>
  29. <span class="icon-bar"></span>
  30. <span class="icon-bar"></span>
  31. </button>
  32. <span class="navbar-brand">
  33. <a class="navbar-link" href="index.html">xaringanthemer</a>
  34. <span class="label label-default" data-toggle="tooltip" data-placement="bottom" title="Released package">0.1.0.9000</span>
  35. </span>
  36. </div>
  37. <div id="navbar" class="navbar-collapse collapse">
  38. <ul class="nav navbar-nav">
  39. <li>
  40. <a href="index.html">
  41. <span class="fa fa-home fa-lg"></span>
  42. </a>
  43. </li>
  44. <li>
  45. <a href="articles/xaringanthemer.html">Get started</a>
  46. </li>
  47. <li>
  48. <a href="articles/singles/themes.html">Themes</a>
  49. </li>
  50. <li>
  51. <a href="articles/singles/fonts.html">Fonts</a>
  52. </li>
  53. <li>
  54. <a href="articles/template-variables.html">Template Variables</a>
  55. </li>
  56. <li>
  57. <a href="articles/css-help.html">CSS Help</a>
  58. </li>
  59. <li>
  60. <a href="reference/index.html">Reference</a>
  61. </li>
  62. </ul>
  63. <ul class="nav navbar-nav navbar-right">
  64. <li>
  65. <a href="https://github.com/gadenbuie/xaringanthemer">
  66. <span class="fa fa-github fa-lg"></span>
  67. </a>
  68. </li>
  69. <li>
  70. <a href="https://twitter.com/grrrck">
  71. <span class="fa fa-twitter fa-lg"></span>
  72. </a>
  73. </li>
  74. </ul>
  75. </div>
  76. <!--/.nav-collapse -->
  77. </div>
  78. <!--/.container -->
  79. </div>
  80. <!--/.navbar -->
  81. </header><div class="row">
  82. <div class="col-md-9 contents">
  83. <!-- index.md is generated from index.Rmd. Please edit that file -->
  84. <div id="xaringanthemer" class="section level1">
  85. <div class="page-header"><h1 class="hasAnchor">
  86. <a href="#xaringanthemer" class="anchor"></a>xaringanthemer</h1></div>
  87. <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>
  88. <p><img src="articles/images/examples.gif" width="100%"></p>
  89. <div id="installation" class="section level2">
  90. <h2 class="hasAnchor">
  91. <a href="#installation" class="anchor"></a>Installation</h2>
  92. <p><strong>xaringanthemer</strong> currently lives on GitHub.</p>
  93. <div class="sourceCode" id="cb1"><pre class="sourceCode r"><code class="sourceCode r"><a class="sourceLine" id="cb1-1" data-line-number="1"><span class="co"># install.packages("devtools")</span></a>
  94. <a class="sourceLine" id="cb1-2" data-line-number="2">devtools<span class="op">::</span><span class="kw"><a href="http://www.rdocumentation.org/packages/devtools/topics/install_github">install_github</a></span>(<span class="st">"gadenbuie/xaringanthemer"</span>)</a></code></pre></div>
  95. </div>
  96. <div id="usage" class="section level2">
  97. <h2 class="hasAnchor">
  98. <a href="#usage" class="anchor"></a>Usage</h2>
  99. <!-- Set link to theme-settings, template-variables, theme functions -->
  100. <p>First, add <code>css: xaringan-themer.css</code> to your xaringan slides YAML header under <code>xaringan::moonreader:</code>.</p>
  101. <div class="sourceCode" id="cb2"><pre class="sourceCode yaml"><code class="sourceCode yaml"><a class="sourceLine" id="cb2-1" data-line-number="1"><span class="fu">output:</span></a>
  102. <a class="sourceLine" id="cb2-2" data-line-number="2"> <span class="fu">xaringan:</span><span class="at">:moon_reader:</span></a>
  103. <a class="sourceLine" id="cb2-3" data-line-number="3"> <span class="fu">lib_dir:</span><span class="at"> libs</span></a>
  104. <a class="sourceLine" id="cb2-4" data-line-number="4"> <span class="fu">css:</span><span class="at"> xaringan-themer.css</span></a></code></pre></div>
  105. <p>Then, in a hidden chunk just after the knitr setup chunk, load <strong>xaringanthemer</strong> and try one of the <a href="articles/singles/themes.html">theme functions</a>.</p>
  106. <div class="sourceCode" id="cb3"><pre class="sourceCode markdown"><code class="sourceCode markdown"><a class="sourceLine" id="cb3-1" data-line-number="1">```{r xaringan-themer, include = FALSE}</a>
  107. <a class="sourceLine" id="cb3-2" data-line-number="2">library(xaringanthemer)</a>
  108. <a class="sourceLine" id="cb3-3" data-line-number="3">mono_light(</a>
  109. <a class="sourceLine" id="cb3-4" data-line-number="4"> base_color = "#1c5253",</a>
  110. <a class="sourceLine" id="cb3-5" data-line-number="5"> header_font_google = google_font("Josefin Sans"),</a>
  111. <a class="sourceLine" id="cb3-6" data-line-number="6"> text_font_google = google_font("Montserrat", "300", "300i"),</a>
  112. <a class="sourceLine" id="cb3-7" data-line-number="7"> code_font_google = google_font("Droid Mono")</a>
  113. <a class="sourceLine" id="cb3-8" data-line-number="8">)</a>
  114. <a class="sourceLine" id="cb3-9" data-line-number="9">```</a></code></pre></div>
  115. <p><img src="articles/images/example_mono_light_1c5253.png" width="100%"></p>
  116. <p><strong>xaringanthemer</strong> is <kbd>Tab</kbd> friendly – <a href="articles/xaringanthemer.html#theme-settings">use autocomplete to explore</a> the <a href="articles/template-variables.html">template variables</a> that you can adjust in each of the themes!</p>
  117. <center>
  118. <img src="articles/images/rmarkdown-template-screenshot.png" width="350px">
  119. </center>
  120. <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>
  121. </div>
  122. </div>
  123. </div>
  124. <div class="col-md-3 hidden-xs hidden-sm" id="sidebar">
  125. <div class="links">
  126. <h2>Links</h2>
  127. <ul class="list-unstyled">
  128. <li>Browse source code at <br><a href="https://github.com/gadenbuie/xaringanthemer">https://​github.com/​gadenbuie/​xaringanthemer</a>
  129. </li>
  130. <li>Report a bug at <br><a href="https://github.com/gadenbuie/xaringanthemer/issues">https://​github.com/​gadenbuie/​xaringanthemer/​issues</a>
  131. </li>
  132. </ul>
  133. </div>
  134. <div class="license">
  135. <h2>License</h2>
  136. <ul class="list-unstyled">
  137. <li><a href="LICENSE.html">Full license</a></li>
  138. <li><small><a href="https://opensource.org/licenses/mit-license.php">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a></small></li>
  139. </ul>
  140. </div>
  141. <div class="developers">
  142. <h2>Developers</h2>
  143. <ul class="list-unstyled">
  144. <li>
  145. <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a> <br><small class="roles"> Author, maintainer </small> </li>
  146. </ul>
  147. </div>
  148. </div>
  149. </div>
  150. <footer><div class="copyright">
  151. <p>Developed by <a href="https://www.garrickadenbuie.com">Garrick Aden-Buie</a>.</p>
  152. </div>
  153. <div class="pkgdown">
  154. <p>Site built with <a href="http://pkgdown.r-lib.org/">pkgdown</a>.</p>
  155. </div>
  156. </footer>
  157. </div>
  158. </body>
  159. </html>