- Move long intro to pkgdown - README is now much shorter - Rename pkgdown "Get Started" to "Features" - Add ggplot theme to quick intro - Add pkgdown docs link to descriptiontags/v0.3.0
| ^vignettes/themes\.Rmd$ | ^vignettes/themes\.Rmd$ | ||||
| ^data-raw$ | ^data-raw$ | ||||
| ^.history$ | ^.history$ | ||||
| ^doc$ | |||||
| ^Meta$ | |||||
| ^index\.md$ |
| Network Trash Folder | Network Trash Folder | ||||
| Temporary Items | Temporary Items | ||||
| .apdisk | .apdisk | ||||
| doc | |||||
| Meta |
| your slides' 'R Markdown' source file or in a separate external | your slides' 'R Markdown' source file or in a separate external | ||||
| script. | script. | ||||
| License: MIT + file LICENSE | License: MIT + file LICENSE | ||||
| URL: https://github.com/gadenbuie/xaringanthemer | |||||
| URL: https://pkg.garrickadenbuie.com/xaringanthemer, | |||||
| https://github.com/gadenbuie/xaringanthemer | |||||
| BugReports: https://github.com/gadenbuie/xaringanthemer/issues | BugReports: https://github.com/gadenbuie/xaringanthemer/issues | ||||
| Depends: | Depends: | ||||
| R (>= 2.10) | R (>= 2.10) |
| varname <- substitute(x) | varname <- substitute(x) | ||||
| stop_not_hex <- function() { | stop_not_hex <- function() { | ||||
| stop(str_wrap( | stop(str_wrap( | ||||
| "`", deparse(varname), "` is not a hexadecimal color: ", x, ". ", | |||||
| "If you used valid CSS colors in your xaringan theme, please convert ", | |||||
| "these colors to hexadecimal form, as this is the format required by ", | |||||
| "ggplot2." | |||||
| "`", deparse(varname), "` is not a hexadecimal color: \"", x, "\". ", | |||||
| "theme_xaringan() requires colors to be specified in hexadecimal format.", | |||||
| " If you used valid CSS colors in your xaringan theme, please convert ", | |||||
| "these colors to hex format, e.g. \"#1a2b3c\"." | |||||
| ), call. = FALSE) | ), call. = FALSE) | ||||
| } | } | ||||
| if (!grepl("^#", x) || grepl("[^#0-9a-fA-F]", x)) { | if (!grepl("^#", x) || grepl("[^#0-9a-fA-F]", x)) { |
| results = "asis", | results = "asis", | ||||
| echo = FALSE, | echo = FALSE, | ||||
| comment = "#>", | comment = "#>", | ||||
| fig.path = "man/figures/README-", | |||||
| fig.path = "man/figures/index-", | |||||
| out.width = "100%" | out.width = "100%" | ||||
| ) | ) | ||||
| IS_README <- TRUE | IS_README <- TRUE | ||||
| ```{r child="man/fragments/_tagline-gif.Rmd"} | ```{r child="man/fragments/_tagline-gif.Rmd"} | ||||
| ``` | ``` | ||||
| ```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE} | |||||
| devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') | |||||
| x <- render_toc("README.Rmd", toc_depth = 3) | |||||
| gsub(" -", "-", sub("^-.+?\n", "", x)) | |||||
| ``` | |||||
| - [Installation](#installation) | |||||
| - [Quick Intro](#quick-intro) | |||||
| - [Themes](#themes) | |||||
| - [Monotone](#monotone) | |||||
| - [Duotone](#duotone) | |||||
| - [Solarized](#solarized) | |||||
| - [Theme Settings](#theme-settings) | |||||
| - [Colors](#colors) | |||||
| - [Fonts](#fonts) | |||||
| - [Adding Custom CSS](#adding-custom-css) | |||||
| ## Installation | ## Installation | ||||
| ```{r child="man/fragments/_installation.Rmd"} | ```{r child="man/fragments/_installation.Rmd"} | ||||
| ``` | ``` | ||||
| ## Quick Intro | |||||
| [theme-functions]: #themes | |||||
| [theme-settings]: #theme-settings | |||||
| [template-variables]: vignettes/template-variables.md | |||||
| ```{r child="man/fragments/_quick-intro.Rmd"} | |||||
| ``` | |||||
| ## Themes | |||||
| ```{r child="man/fragments/_themes.Rmd"} | |||||
| ``` | |||||
| ## Theme Settings | |||||
| The theme functions listed above are wrappers around the central function of this package, `style_xaringan()`. | |||||
| If you want to start from the default **xaringan** theme and make a few modifications, start there. | |||||
| All of the [theme template variables][template-variables] are repeated in each of the theme functions (instead of relying on `...`) so that you can use autocompletion to find and change the defaults for any theme function. | |||||
| To override the default value of any theme functions, set the appropriate argument in the theme function. | |||||
| A table of all template variables is included in [`vignette("template-variables", "xaringanthemer")`][template-variables]. | |||||
| As an example, try typing out `style_duo_accent(` and then press <kbd>Tab</kbd> to see all of the theme options. | |||||
| The arguments of each theme function are named so that you can first think of the element you want to change, then the property of that element. | |||||
| Here are some of the `text_` theme options: | |||||
| ```{r, results='asis', echo=FALSE} | |||||
| load(here::here("R", "sysdata.rda")) | |||||
| tvv <- template_variables$variable | |||||
| cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n") | |||||
| cat("- *and more ...*") | |||||
| ``` | |||||
| And here are the title slide theme options: | |||||
| ```{r results='asis', echo=FALSE} | |||||
| cat(paste0("- `", tvv[grepl("^title_slide_", tvv)], "`"), sep = "\n") | |||||
| ``` | |||||
| ## Fonts | |||||
| [adding-custom-css]: #adding-custom-css | |||||
| ```{r child="man/fragments/_fonts.Rmd"} | |||||
| ``` | |||||
| ## Colors | |||||
| ```{r child="man/fragments/_colors.Rmd"} | |||||
| ``` | |||||
| ## Adding Custom CSS | |||||
| You can also add custom CSS classes using the `extra_css` argument in the theme functions. | |||||
| This argument takes a named list of CSS definitions each containing a named list of CSS property-value pairs. | |||||
| ```r | |||||
| extra_css <- list( | |||||
| ".small" = list("font-size" = "90%"), | |||||
| ".full-width" = list( | |||||
| display = "flex", | |||||
| width = "100%", | |||||
| flex = "1 1 auto" | |||||
| ) | |||||
| ) | |||||
| ``` | |||||
| If you would rather keep your additional css definitions in a separate file, you can call `style_extra_css()` separately. | |||||
| Just be sure to include your new CSS file in the list of applied files in your YAML header. | |||||
| ## Features | |||||
| ```r | |||||
| style_extra_css(css = extra_css, outfile = "custom.css") | |||||
| ``` | |||||
| ```{r results='asis', echo=FALSE} | |||||
| extra_css <- list( | |||||
| ".small" = list("font-size" = "90%"), | |||||
| ".full-width" = list( | |||||
| display = "flex", | |||||
| width = "100%", | |||||
| flex = "1 1 auto" | |||||
| ) | |||||
| ) | |||||
| cat( | |||||
| "\n```css", | |||||
| "/* Extra CSS */", | |||||
| xaringanthemer:::list2css(extra_css), | |||||
| "```", | |||||
| sep = "\n" | |||||
| ) | |||||
| ``` | |||||
| This is most helpful when wanting to define helper classes to work with the [remark.js][remarkjs] `.class[]` syntax. | |||||
| Using the above example, we could add slide text `.small[in smaller font size]`. | |||||
| ```{r child="man/fragments/_thanks.Rmd"} | |||||
| ``` | |||||
| ```{r include=FALSE} | |||||
| rm("IS_README") | |||||
| ``` | |||||
| There's a lot more that **xaringanthemer** can do! | |||||
| [Discover xaringanthemer's features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html) |
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes" /> | <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes" /> | ||||
| - [Installation](#installation) | |||||
| - [Quick Intro](#quick-intro) | |||||
| - [Themes](#themes) | |||||
| - [Monotone](#monotone) | |||||
| - [Duotone](#duotone) | |||||
| - [Solarized](#solarized) | |||||
| - [Theme Settings](#theme-settings) | |||||
| - [Colors](#colors) | |||||
| - [Fonts](#fonts) | |||||
| - [Adding Custom CSS](#adding-custom-css) | |||||
| ## Installation | ## Installation | ||||
| You can install **xaringanthemer** from CRAN | You can install **xaringanthemer** from CRAN | ||||
| [GitHub](https://github.com/gadenbuie/xaringanthemer). | [GitHub](https://github.com/gadenbuie/xaringanthemer). | ||||
| ``` r | ``` r | ||||
| # install.packages("devtools") | |||||
| devtools::install_github("gadenbuie/xaringanthemer") | |||||
| ``` | |||||
| ## Quick Intro | |||||
| <!-- Set link to theme-settings, template-variables, theme functions --> | |||||
| First, add the `xaringan-themer.css` file to the YAML header of your | |||||
| xaringan slides. | |||||
| ``` yaml | |||||
| output: | |||||
| xaringan::moon_reader: | |||||
| css: xaringan-themer.css | |||||
| ``` | |||||
| Then, in a hidden chunk just after the knitr setup chunk, load | |||||
| **xaringanthemer** and try one of the [theme functions](#themes). | |||||
| ```` markdown | |||||
| ```{r xaringan-themer, include = FALSE} | |||||
| library(xaringanthemer) | |||||
| style_mono_light( | |||||
| base_color = "#1c5253", | |||||
| header_font_google = google_font("Josefin Sans"), | |||||
| text_font_google = google_font("Montserrat", "300", "300i"), | |||||
| code_font_google = google_font("Droid Mono") | |||||
| ) | |||||
| ``` | |||||
| ```` | |||||
| <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" /> | |||||
| ### Tab Completion | |||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to | |||||
| explore](#theme-settings) the [template | |||||
| variables](vignettes/template-variables.md) that you can adjust in each | |||||
| of the themes\! | |||||
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" /> | |||||
| ### R Markdown Template in RStudio | |||||
| You can also skip the above and just create a *Ninja Themed | |||||
| Presentation* from the New R Markdown Document menu in RStudio. | |||||
| <center> | |||||
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" /> | |||||
| </center> | |||||
| ## Themes | |||||
| **xaringanthemer** includes a number of functions that provide themed | |||||
| **xaringan** styles. All of the styling functions start with the | |||||
| `style_` prefix. | |||||
| The goal of each style function is to quickly set up a coordinated color | |||||
| palette for your slides based on one or two starter colors. Styles based | |||||
| on one color start with `style_mono_` and styles based on two colors | |||||
| start with `style_duo_`. How the starter colors are used is described in | |||||
| the final portion of the style function name. For example, | |||||
| `style_mono_accent()` uses a single color as an accent color. | |||||
| Note that the colors used below are for demonstration only, the point of | |||||
| the `style_` functions is for you to choose your own color palette\! | |||||
| If you color palette uses more than two colors, you can add additional | |||||
| colors with the `colors` argument. See the [Colors](#colors) section for | |||||
| more information. | |||||
| ### Monotone | |||||
| Use these functions to automatically create a consistent color palette | |||||
| for your slides, based around a single color. | |||||
| #### `style_mono_light()` | |||||
| A light theme based around a single color. | |||||
| ``` r | |||||
| style_mono_light(base_color = "#23395b") | |||||
| ``` | |||||
|  | |||||
| #### `style_mono_dark()` | |||||
| A dark theme based around a single color. | |||||
| ``` r | |||||
| style_mono_dark(base_color = "#cbf7ed") | |||||
| ``` | |||||
|  | |||||
| #### `style_mono_accent()` | |||||
| The default xaringan theme with a single color used for color accents on | |||||
| select elements (headers, bold text, etc.). | |||||
| ``` r | |||||
| style_mono_accent(base_color = "#43418A") | |||||
| ``` | |||||
|  | |||||
| #### `style_mono_accent_inverse()` | |||||
| An “inverted” default xaringan theme with a single color used for color | |||||
| accents on select elements (headers, bold text, etc.). | |||||
| ``` r | |||||
| style_mono_accent_inverse(base_color = "#3C989E") | |||||
| ``` | |||||
|  | |||||
| ### Duotone | |||||
| These themes build from two (ideally) complementary colors. | |||||
| #### `style_duo()` | |||||
| A two-colored theme based on a primary and secondary color. | |||||
| ``` r | |||||
| style_duo(primary_color = "#1F4257", secondary_color = "#F97B64") | |||||
| # install.packages("remotes") | |||||
| remotes::install_github("gadenbuie/xaringanthemer") | |||||
| ``` | ``` | ||||
|  | |||||
| #### `style_duo_accent()` | |||||
| The default Xaringan theme with two accent colors. | |||||
| ``` r | |||||
| style_duo_accent(primary_color = "#006747", secondary_color = "#CFC493") | |||||
| ``` | |||||
|  | |||||
| #### `style_duo_accent_inverse()` | |||||
| An “inverted” default Xaringan theme with two accent colors. | |||||
| ``` r | |||||
| style_duo_accent_inverse(primary_color = "#006747", secondary_color = "#CFC493") | |||||
| ``` | |||||
|  | |||||
| ### Solarized | |||||
| There are also two themes based around the [solarized color | |||||
| palette](http://ethanschoonover.com/solarized), | |||||
| `style_solarized_light()` and `style_solarized_dark()`. For both themes, | |||||
| it is advisted to change the syntax highlighting theme to | |||||
| `solarized-light` or `solarized-dark` (looks great paired or | |||||
| constrasted). | |||||
| #### `style_solarized_light()` | |||||
| ``` r | |||||
| style_solarized_light() | |||||
| ``` | |||||
|  | |||||
| #### `style_solarized_dark()` | |||||
| ``` r | |||||
| style_solarized_dark() | |||||
| ``` | |||||
|  | |||||
| To do this, your YAML header should look more-or-less like this: | |||||
| ``` yaml | |||||
| output: | |||||
| xaringan::moon_reader: | |||||
| css: ["xaringan-themer.css"] | |||||
| nature: | |||||
| highlightStyle: solarized-dark | |||||
| highlightLines: true | |||||
| countIncrementalSlides: false | |||||
| ``` | |||||
| ## Theme Settings | |||||
| The theme functions listed above are wrappers around the central | |||||
| function of this package, `style_xaringan()`. If you want to start from | |||||
| the default **xaringan** theme and make a few modifications, start | |||||
| there. | |||||
| All of the [theme template variables](vignettes/template-variables.md) | |||||
| are repeated in each of the theme functions (instead of relying on | |||||
| `...`) so that you can use autocompletion to find and change the | |||||
| defaults for any theme function. To override the default value of any | |||||
| theme functions, set the appropriate argument in the theme function. A | |||||
| table of all template variables is included in | |||||
| [`vignette("template-variables", | |||||
| "xaringanthemer")`](vignettes/template-variables.md). | |||||
| As an example, try typing out `style_duo_accent(` and then press | |||||
| <kbd>Tab</kbd> to see all of the theme options. | |||||
| The arguments of each theme function are named so that you can first | |||||
| think of the element you want to change, then the property of that | |||||
| element. | |||||
| Here are some of the `text_` theme options: | |||||
| - `text_color` | |||||
| - `text_bold_color` | |||||
| - `text_slide_number_color` | |||||
| - `text_font_size` | |||||
| - `text_slide_number_font_size` | |||||
| - *and more …* | |||||
| And here are the title slide theme options: | |||||
| - `title_slide_text_color` | |||||
| - `title_slide_background_color` | |||||
| - `title_slide_background_image` | |||||
| - `title_slide_background_size` | |||||
| - `title_slide_background_position` | |||||
| ## Fonts | |||||
| <!-- Need to set [adding-custom-css] --> | |||||
| ### Default Fonts | |||||
| **xaringanthemer** by default uses a different set of default fonts for | |||||
| heading and body fonts. The new defaults use | |||||
| [Cabin](https://fonts.google.com/specimen/Cabin) for headings and [Noto | |||||
| Sans](https://fonts.google.com/specimen/Noto+Sans) for body text. These | |||||
| fonts are easier to read on screens and at a distance during | |||||
| presentations, and they support a wide variety of languages and weights. | |||||
| Another reason for the change is that the xaringan (remarkjs) default | |||||
| body font, *Droid Serif*, is no longer officially included in Google | |||||
| Fonts. | |||||
| If you would like to use the fonts from the [default xaringan | |||||
| theme](https://slides.yihui.name/xaringan/), you can use the following | |||||
| arguments in your style function. | |||||
| ``` r | |||||
| style_xaringan( | |||||
| text_font_family = "Droid Serif", | |||||
| text_font_url = "https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic", | |||||
| header_font_google = google_font("Yanone Kaffeesatz") | |||||
| ) | |||||
| ``` | |||||
| ### Custom and *Google Font* Fonts | |||||
| **xaringanthemer** makes it easy to use [Google | |||||
| Fonts](https://fonts.google.com) in your presentations (provided you | |||||
| have an internet connection during the presentation) or to fully specify | |||||
| your font files. | |||||
| To use [Google Fonts](https://fonts.google.com), set the | |||||
| `<type>_font_google` theme arguments – `text_font_google`, | |||||
| `header_font_google`, `code_font_google` — using the `google_font()` | |||||
| helper. The help documentation in `?google_font` provides more info. | |||||
| ``` r | |||||
| style_mono_light( | |||||
| header_font_google = google_font("Josefin Slab", "600"), | |||||
| text_font_google = google_font("Work Sans", "300", "300i"), | |||||
| code_font_google = google_font("IBM Plex Mono") | |||||
| ) | |||||
| ``` | |||||
| If you set an `<type>_font_google` theme arguments, then | |||||
| `<type>_font_family`, `<type>_font_weight` and `<type>_font_url` are | |||||
| overwritten – where `<type>` is one of `header`, `text`, or `code`. | |||||
| To use a font hosted outside of Google fonts, you need to provide both | |||||
| `<type>_font_family` and `<type>_font_url`. For example, suppose you | |||||
| want to use a code font with ligatures for your code chunks, such as | |||||
| [Fira Code](https://github.com/tonsky/FiraCode), which would be declared | |||||
| with `code_font_family`. The [browser | |||||
| usage](https://github.com/tonsky/FiraCode#browser-support) section of | |||||
| the Fira Code README provides a CSS URL to be used with an `@import` | |||||
| statement that you can use with the `code_font_url` argument. | |||||
| ``` r | |||||
| style_solarized_dark( | |||||
| code_font_family = "Fira Code", | |||||
| code_font_url = "https://cdn.jsdelivr.net/gh/tonsky/FiraCode@2/distr/fira_code.css" | |||||
| ) | |||||
| ``` | |||||
| Remember that you need to supply either `<type>_google_font` using the | |||||
| `google_font()` helper *or both* `<type>_font_family` and | |||||
| `<type>_font_url`. | |||||
| ### Using Additional Fonts | |||||
| If you want to use additional fonts for use in [custom CSS | |||||
| definitions](#adding-custom-css), use the `extra_fonts` argument to pass | |||||
| a list of URLs or `google_font()`s. Notice that you will need to add | |||||
| custom CSS (for example, via `extra_css`) to use the fonts imported in | |||||
| `extra_fonts`. | |||||
| ``` r | |||||
| style_mono_light( | |||||
| extra_fonts = list( | |||||
| google_font("Sofia"), | |||||
| # Young Serif by uplaod.fr | |||||
| "https://cdn.jsdelivr.net/gh/uplaod/YoungSerif/fonts/webfonts/fontface.css", | |||||
| ), | |||||
| extra_css = list( | |||||
| ".title-slide h2" = list("font-family" = "Sofia"), | |||||
| blockquote = list("font-family" = "youngserifregular") | |||||
| ) | |||||
| ) | |||||
| ``` | |||||
| ## Colors | |||||
| When designing your xaringan theme, you may have additional colors in | |||||
| your desired color palette beyond those used in the accent colors of the | |||||
| mono and duotone styles. | |||||
| The `style*()` functions in xaringanthemer include a `colors` argument | |||||
| that lets you quickly define a additional colors to use in your slides. | |||||
| This argument takes a vector of named colors | |||||
| ``` r | |||||
| colors = c( | |||||
| red = "#f34213", | |||||
| purple = "#3e2f5b", | |||||
| orange = "#ff8811", | |||||
| green = "#136f63", | |||||
| white = "#FFFFFF", | |||||
| ) | |||||
| ``` | |||||
| and creates CSS classes from the color name that set the text color — | |||||
| e.g. `.red` — or that set the background color — e.g. `.bg-red`. If you | |||||
| use custom CSS in your slides, the color name is also stored in a CSS | |||||
| variable — e.g. `var(--red)`. | |||||
| So slide text like this | |||||
| ``` markdown | |||||
| This **.red[simple]** .white.bg-purple[demo] | |||||
| _.orange[shows]_ the colors .green[in action]. | |||||
| ``` | |||||
| will be rendered in HTML as | |||||
| <blockquote> | |||||
| This <strong><span style="color: #f34213">simple</span></strong> | |||||
| <span style="color:#FFFFFF;background-color:#3e2f5b;">demo</span> | |||||
| <em style="color:#ff8811">shows</em> the colors | |||||
| <span style="color:#136f63">in action</span>. | |||||
| </blockquote> | |||||
| Note that the color names in `colors` need to be valid CSS names, so | |||||
| `"purple-light"` will work, but `"purple light"` will not. | |||||
| ## Adding Custom CSS | |||||
| You can also add custom CSS classes using the `extra_css` argument in | |||||
| the theme functions. This argument takes a named list of CSS definitions | |||||
| each containing a named list of CSS property-value pairs. | |||||
| ``` r | |||||
| extra_css <- list( | |||||
| ".small" = list("font-size" = "90%"), | |||||
| ".full-width" = list( | |||||
| display = "flex", | |||||
| width = "100%", | |||||
| flex = "1 1 auto" | |||||
| ) | |||||
| ) | |||||
| ``` | |||||
| If you would rather keep your additional css definitions in a separate | |||||
| file, you can call `style_extra_css()` separately. Just be sure to | |||||
| include your new CSS file in the list of applied files in your YAML | |||||
| header. | |||||
| ``` r | |||||
| style_extra_css(css = extra_css, outfile = "custom.css") | |||||
| ``` | |||||
| ``` css | |||||
| /* Extra CSS */ | |||||
| .small { | |||||
| font-size: 90%; | |||||
| } | |||||
| .full-width { | |||||
| display: flex; | |||||
| width: 100%; | |||||
| flex: 1 1 auto; | |||||
| } | |||||
| ``` | |||||
| This is most helpful when wanting to define helper classes to work with | |||||
| the [remark.js](https://github.com/gnab/remark) `.class[]` syntax. Using | |||||
| the above example, we could add slide text `.small[in smaller font | |||||
| size]`. | |||||
| ----- | |||||
| **xaringanthemer** was built by [Garrick | |||||
| Aden-Buie](https://www.garrickadenbuie.com) | |||||
| ([@grrrck](https://twitter.com/grrrck)). | |||||
| Big thank you to [Yihui Xie](https://yihui.name), especially for | |||||
| [xaringan](https://github.com/yihui/xaringan). Also thanks to [Ole | |||||
| Petter Bang](http://gnab.org) for | |||||
| [remark.js](https://github.com/gnab/remark). | |||||
| ## Features | |||||
| Feel free to [file an | |||||
| issue](https://github.com/gadenbuie/xaringanthemer/issues) if you find a | |||||
| bug or have a theme suggestion – or better yet, submit a pull request\! | |||||
| There’s a lot more that **xaringanthemer** can do\! [Discover | |||||
| xaringanthemer’s | |||||
| features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html) |
| output: github_document | output: github_document | ||||
| --- | --- | ||||
| <!-- index.md is generated from index.Rmd. Please edit that file --> | |||||
| <!-- README.md is generated from README.Rmd. Please edit that file --> | |||||
| ```{r setup, include = FALSE} | ```{r setup, include = FALSE} | ||||
| knitr::opts_chunk$set( | knitr::opts_chunk$set( | ||||
| results = "asis", | results = "asis", | ||||
| echo = FALSE, | echo = FALSE, | ||||
| comment = "#>", | comment = "#>", | ||||
| fig.path = "man/figures/README-", | |||||
| fig.path = "man/figures/index-", | |||||
| out.width = "100%" | out.width = "100%" | ||||
| ) | ) | ||||
| IS_README <- TRUE | |||||
| library(xaringanthemer) | library(xaringanthemer) | ||||
| ``` | ``` | ||||
| # xaringanthemer | # xaringanthemer | ||||
| <!-- badges: start --> | |||||
| [](https://CRAN.R-project.org/package=xaringanthemer) | |||||
| [](https://www.tidyverse.org/lifecycle/#stable) | |||||
| [](https://travis-ci.com/gadenbuie/xaringanthemer) | |||||
| [](https://codecov.io/github/gadenbuie/xaringanthemer) | |||||
| <!-- badges: end --> | |||||
| ```{r child="man/fragments/_tagline-gif.Rmd"} | ```{r child="man/fragments/_tagline-gif.Rmd"} | ||||
| ``` | ``` | ||||
| ```{r child="man/fragments/_installation.Rmd"} | ```{r child="man/fragments/_installation.Rmd"} | ||||
| ``` | ``` | ||||
| ## Usage | |||||
| ## Quick Intro | |||||
| [theme-functions]: articles/singles/themes.html | |||||
| [theme-settings]: articles/xaringanthemer.html#theme-settings | |||||
| [template-variables]: articles/template-variables.html | |||||
| [theme-functions]: #themes | |||||
| [theme-settings]: #theme-settings | |||||
| [template-variables]: vignettes/template-variables.md | |||||
| [ggplot2]: https://ggplot2.tidyverse.org | |||||
| ```{r child="man/fragments/_quick-intro.Rmd"} | ```{r child="man/fragments/_quick-intro.Rmd"} | ||||
| ``` | ``` | ||||
| ## Features | |||||
| There's a lot more that **xaringanthemer** can do! | |||||
| [Discover xaringanthemer's features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html) |
| <!-- README.md is generated from README.Rmd. Please edit that file --> | |||||
| # xaringanthemer | |||||
| <!-- badges: start --> | |||||
| [](https://CRAN.R-project.org/package=xaringanthemer) | |||||
| [](https://www.tidyverse.org/lifecycle/#stable) | |||||
| [](https://travis-ci.com/gadenbuie/xaringanthemer) | |||||
| [](https://codecov.io/github/gadenbuie/xaringanthemer) | |||||
| <!-- badges: end --> | |||||
| Give your [xaringan](https://github.com/yihui/xaringan) slides some | |||||
| style with **xaringanthemer** within your `slides.Rmd` file without | |||||
| (much) CSS. | |||||
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/examples.gif" alt="Animation previewing many xaringanthemer themes" /> | |||||
| ## Installation | |||||
| You can install **xaringanthemer** from CRAN | |||||
| ``` r | |||||
| install.packages("xaringanthemer") | |||||
| ``` | |||||
| or you can install the development version of xaringanthemer from | |||||
| [GitHub](https://github.com/gadenbuie/xaringanthemer). | |||||
| ``` r | |||||
| # install.packages("remotes") | |||||
| remotes::install_github("gadenbuie/xaringanthemer") | |||||
| ``` | |||||
| ## Quick Intro | |||||
| <!-- Set link to theme-settings, template-variables, theme functions --> | |||||
| First, add the `xaringan-themer.css` file to the YAML header of your | |||||
| xaringan slides. | |||||
| ``` yaml | |||||
| output: | |||||
| xaringan::moon_reader: | |||||
| css: xaringan-themer.css | |||||
| ``` | |||||
| Then, in a hidden chunk just after the knitr setup chunk, load | |||||
| **xaringanthemer** and try one of the [theme functions](#themes). | |||||
| ```` markdown | |||||
| ```{r xaringan-themer, include = FALSE} | |||||
| library(xaringanthemer) | |||||
| style_mono_light( | |||||
| base_color = "#1c5253", | |||||
| header_font_google = google_font("Josefin Sans"), | |||||
| text_font_google = google_font("Montserrat", "300", "300i"), | |||||
| code_font_google = google_font("Droid Mono") | |||||
| ) | |||||
| ``` | |||||
| ```` | |||||
| <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" /> | |||||
| ### Matching ggplot Themes | |||||
| **xaringanthemer** even provides a | |||||
| [ggplot2](https://ggplot2.tidyverse.org) theme with `theme_xaringan()` | |||||
| that uses the colors and fonts from your slide theme. Built on the | |||||
| [showtext](https://github.com/yixuan/showtext) package, and designed to | |||||
| work seamlessly with [Google Fonts](https://fonts.google.com). | |||||
| Color and fill scales are also provided for matching sequential color | |||||
| scales based on the primary color used in your slides. See | |||||
| `?scale_xaringan` for more details. | |||||
| ``` r | |||||
| library(ggplot2) | |||||
| ggplot(diamonds) + | |||||
| aes(cut, fill = cut) + | |||||
| geom_bar(show.legend = FALSE) + | |||||
| labs( | |||||
| x = "Cut", | |||||
| y = "Count", | |||||
| title = "A Fancy diamonds Plot" | |||||
| ) + | |||||
| theme_xaringan(background_color = "#FFFFFF") + | |||||
| scale_xaringan_fill_discrete() | |||||
| ``` | |||||
| <img src="man/figures/index-theme_xaringan_demo-1.png" width="100%" /> | |||||
| ### Tab Completion | |||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to | |||||
| explore](#theme-settings) the [template | |||||
| variables](vignettes/template-variables.md) that you can adjust in each | |||||
| of the themes\! | |||||
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" data-external="1" /> | |||||
| ### R Markdown Template in RStudio | |||||
| You can also skip the above and just create a *Ninja Themed | |||||
| Presentation* from the New R Markdown Document menu in RStudio. | |||||
| <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> | |||||
| ## Features | |||||
| There’s a lot more that **xaringanthemer** can do\! [Discover | |||||
| xaringanthemer’s | |||||
| features.](https://pkg.garrickadenbuie.com/xaringanthemer/features.html) |
| rmarkdown::render("README.Rmd", quiet = TRUE) | rmarkdown::render("README.Rmd", quiet = TRUE) | ||||
| unlink("README.html") | unlink("README.html") | ||||
| message("Rendering index.Rmd for pkgdown") | |||||
| rmarkdown::render("index.Rmd", quiet = TRUE) | |||||
| unlink("index.html") | |||||
| message("Checking package") | message("Checking package") | ||||
| devtools::check(document = FALSE) | devtools::check(document = FALSE) | ||||
| or you can install the development version of xaringanthemer from [GitHub](https://github.com/gadenbuie/xaringanthemer). | or you can install the development version of xaringanthemer from [GitHub](https://github.com/gadenbuie/xaringanthemer). | ||||
| ```r | ```r | ||||
| # install.packages("devtools") | |||||
| devtools::install_github("gadenbuie/xaringanthemer") | |||||
| # install.packages("remotes") | |||||
| remotes::install_github("gadenbuie/xaringanthemer") | |||||
| ``` | ``` |
| <!-- Set link to theme-settings, template-variables, theme functions --> | <!-- Set link to theme-settings, template-variables, theme functions --> | ||||
| ```{r include=FALSE} | |||||
| if (!exists("IS_README")) IS_README <- FALSE | |||||
| ``` | |||||
| First, add the `xaringan-themer.css` file to the YAML header of your xaringan slides. | First, add the `xaringan-themer.css` file to the YAML header of your xaringan slides. | ||||
| ```yaml | ```yaml | ||||
| ``` | ``` | ||||
| ```` | ```` | ||||
| <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" /> | |||||
| <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" /> | |||||
| ### Matching ggplot Themes | |||||
| [showtext]: https://github.com/yixuan/showtext | |||||
| **xaringanthemer** even provides a [ggplot2] theme | |||||
| with `theme_xaringan()` | |||||
| that uses the colors and fonts from your slide theme. | |||||
| Built on the [showtext] package, | |||||
| and designed to work seamlessly with [Google Fonts](https://fonts.google.com). | |||||
| Color and fill scales are also provided | |||||
| for matching sequential color scales based on | |||||
| the primary color used in your slides. | |||||
| See `?scale_xaringan` for more details. | |||||
| ```{r xaringanthemer-ggplot-setup, include=FALSE, eval=IS_README} | |||||
| style_mono_light( | |||||
| base_color = "#1c5253", | |||||
| header_font_google = google_font("Josefin Sans"), | |||||
| text_font_google = google_font("Montserrat", "300", "300i"), | |||||
| code_font_google = google_font("Droid Mono"), | |||||
| outfile = NULL | |||||
| ) | |||||
| ``` | |||||
| ```{r theme_xaringan_demo, echo=TRUE, warning=FALSE, fig.width=13, fig.height=5.5, eval=IS_README} | |||||
| library(ggplot2) | |||||
| ggplot(diamonds) + | |||||
| aes(cut, fill = cut) + | |||||
| geom_bar(show.legend = FALSE) + | |||||
| labs( | |||||
| x = "Cut", | |||||
| y = "Count", | |||||
| title = "A Fancy diamonds Plot" | |||||
| ) + | |||||
| theme_xaringan(background_color = "#FFFFFF") + | |||||
| scale_xaringan_fill_discrete() | |||||
| ``` | |||||
| ```{r link-to-plot-image, echo=FALSE, eval=!IS_README, results='asis'} | |||||
| if (identical(Sys.getenv("IN_PKGDOWN"), "true")) { | |||||
| cat("") | |||||
| } else { | |||||
| cat('<img src="../man/figures/index-theme_xaringan_demo-1.png" data-external="1" />') | |||||
| } | |||||
| ``` | |||||
| ### Tab Completion | ### Tab Completion | ||||
| **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore][theme-settings] the [template variables][template-variables] that you can adjust in each of the themes! | **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore][theme-settings] the [template variables][template-variables] that you can adjust in each of the themes! | ||||
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" /> | |||||
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/example-rstudio-completion.gif" alt="Demonstration of argument auto-completion with RStudio" data-external="1" /> | |||||
| ### R Markdown Template in RStudio | ### R Markdown Template in RStudio | ||||
| You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio. | You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio. | ||||
| <center> | <center> | ||||
| <img src="https://raw.githubusercontent.com/gadenbuie/xaringanthemer/assets/rmarkdown-template-screenshot.png" alt="The 'New R Markdown Document' menu in RStudio" /> | |||||
| <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> | </center> |
| ```{r include=FALSE} | ```{r include=FALSE} | ||||
| IS_README <- exists("IS_README") && IS_README | IS_README <- exists("IS_README") && IS_README | ||||
| include_graphic <- function(img_path) { | include_graphic <- function(img_path) { | ||||
| glue::glue("") | |||||
| glue::glue( | |||||
| '<img src="https://raw.githubusercontent.com/gadenbuie/', | |||||
| 'xaringanthemer/assets/{img_path}" data-external="1" />' | |||||
| ) | |||||
| } | } | ||||
| ``` | ``` | ||||
| \seealso{ | \seealso{ | ||||
| Useful links: | Useful links: | ||||
| \itemize{ | \itemize{ | ||||
| \item \url{https://pkg.garrickadenbuie.com/xaringanthemer} | |||||
| \item \url{https://github.com/gadenbuie/xaringanthemer} | \item \url{https://github.com/gadenbuie/xaringanthemer} | ||||
| \item Report bugs at \url{https://github.com/gadenbuie/xaringanthemer/issues} | \item Report bugs at \url{https://github.com/gadenbuie/xaringanthemer/issues} | ||||
| } | } |
| navbar: | navbar: | ||||
| left: | left: | ||||
| intro: | intro: | ||||
| text: Get started | |||||
| text: Features | |||||
| href: articles/xaringanthemer.html | href: articles/xaringanthemer.html | ||||
| reference: | reference: | ||||
| text: Reference | text: Reference |
| results = "asis", | results = "asis", | ||||
| echo = FALSE, | echo = FALSE, | ||||
| comment = "#>", | comment = "#>", | ||||
| fig.path = "man/figures/README-", | |||||
| fig.path = "man/figures/index-", | |||||
| out.width = "100%" | out.width = "100%" | ||||
| ) | ) | ||||
| library(xaringanthemer) | library(xaringanthemer) | ||||
| ``` | ``` | ||||
| ```{css echo=FALSE} | |||||
| img { max-width: 100%; } | |||||
| ``` | |||||
| [xaringan]: https://github.com/yihui/xaringan | [xaringan]: https://github.com/yihui/xaringan | ||||
| [remarkjs]: https://github.com/gnab/remark | [remarkjs]: https://github.com/gnab/remark | ||||