garrick
/
xaringanthemer
зеркало из https://github.com/gadenbuie/xaringanthemer.git


			
							---
title: "Xaringan CSS Theme Generator"
author: "Garrick Aden-Buie"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
vignette: >
  %\VignetteIndexEntry{Overview of xaringanthemer}
  %\VignetteEngine{knitr::rmarkdown}
  %\VignetteEncoding{UTF-8}
---
<!-- This vignette was automatically created from README.Rmd

Please consider removing installation instructions, badges, and
any other README-specific material.
                            
You can include short independent documents in README.Rmd using
the following chunk argument syntax:
child='vignettes/rmdhunks/example1.Rmd'
                            
https://yihui.name/knitr/demo/child/
or read-in chunks stored in an independent R script using knitr::read_chunk()
https://yihui.name/knitr/demo/externalization/ -->

<!-- README.md is generated from README.Rmd. Please edit that file -->

```{r setup, include = FALSE}
knitr::opts_chunk$set(
  collapse = TRUE,
  results = "asis",
  echo = FALSE,
  comment = "#>",
  fig.path = "man/figures/README-",
  out.width = "100%"
)
library(xaringanthemer)
```
# xaringanthemer

[xaringan]: https://github.com/yihui/xaringan
[remarkjs]: https://github.com/gnab/remark

Give your [xaringan] slides some style with **xaringanthemer** within your `slides.Rmd` file without (much) CSS.

![](images/examples.gif)

```{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)
- [Adding Custom CSS](#adding-custom-css)
- [Fonts](#fonts)

## Quick Intro

First, add `css: xaringan-themer.css` to your xaringan slides YAML header under `xaringan::moonreader:`.

```yaml
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: xaringan-themer.css
```

Then, in the knitr setup chunk, load **xaringanthemer** and try one of the [theme functions](#themes).

````markdown
```{r setup, include = FALSE}`r ""`
options(htmltools.dir.version = FALSE)

library(xaringanthemer)
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")
)
```
````

![](images/example_mono_light_1c5253.png)

**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#theme-settings) the template variables^[tv] that you can adjust in each of the themes!

[tv]: See `vignette("template-variables", "xaringanthemer")`

<center><img src="images/rmarkdown-template-screenshot.png" width="350px"></center>

You can also skip the above and just create a *Ninja Themed Presentation* from the New R Markdown Document menu in RStudio.

## Themes

### Monotone

Use these functions to automatically create a consistent color palette for your slides, based around a single color.

#### `mono_light()`

A light theme based around a single color.

```{r mono_light}
demo_function_call <- function(f, n_params = 1) {
  cat(sep = "",
    "```r\n",
    paste(substitute(f)), "(",
    if (n_params > 0) paste(collapse = ", ",
      sapply(1:n_params, function(i) {
        paste0(names(formals(f))[i], ' = "', formals(f)[[i]], '"')})),
    ")\n```"
    )
}
demo_function_call(mono_light, 1)
```

![](images/example_mono_light.png)

#### `mono_dark()`

A dark theme based around a single color.

```{r mono_dark}
demo_function_call(mono_dark, 1)
```

![](images/example_mono_dark.png)

#### `mono_accent()`

The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).

```{r mono_accent}
demo_function_call(mono_accent, 1)
```

![](images/example_mono_accent.png)

#### `mono_accent_inverse()`

An "inverted" default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.).

```{r mono_accent_inverse}
demo_function_call(mono_accent_inverse, 1)
```

![](images/example_mono_accent_inverse.png)
    

### Duotone

These themes build from two (ideally) complementary colors.

#### `duo()`

A two-colored theme based on a primary and secondary color.

```{r duo}
demo_function_call(duo, 2)
```

![](images/example_duo.png)

#### `duo_accent()`

The default Xaringan theme with two accent colors.

```{r duo_accent}
demo_function_call(duo_accent, 2)
```

![](images/example_duo_accent.png)

#### `duo_accent_inverse()`

An "inverted" default Xaringan theme with two accent colors.

```{r duo_accent_inverse}
demo_function_call(duo_accent_inverse, 2)
```

![](images/example_duo_accent_inverse.png)

### Solarized

There are also two themes based around the [solarized color palette](http://ethanschoonover.com/solarized), `solarized_light()` and `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).

#### `solarized_light()`

```{r solarized_light}
demo_function_call(solarized_light, 0)
```

![](images/example_solarized_light.png)

#### `solarized_dark()`

```{r solarized_dark}
demo_function_call(solarized_dark, 0)
```

![](images/example_solarized_dark.png)


To do this, your YAML header should look more-or-less like this:

```yaml
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["xaringan-themer.css"]
    nature:
      highlightStyle: solarized-dark
      highlightLines: true
      countIncrementalSlides: false
```

## Theme Settings

The theme functions listed above are just wrappers around the central function of this package, `write_xaringan_theme()`.
If you want to start from the default **xaringan** theme and make a few modifications, start there.

All of the theme 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")`.

As an example, try loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options.

All of the theme options are named so that you 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}
source("../R/theme_settings.R")
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")
```

## 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(
  ".red"   = list(color = "red"),
  ".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 `write_extra_css()` separately.
Just be sure to include your new CSS file in the list of applied files in your YAML header.

```r
write_extra_css(css = extra_css, outfile = "custom.css")
```

```{r results='asis', echo=FALSE}
extra_css <- list(
  ".red"   = list(color = "red"),
  ".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 color text red `.red[like this]` or write `.small[in smaller font size]`.

## Fonts

[google-fonts]: https://fonts.google.com

Yihui picked out great fonts for the default **xaringan** theme, but sometimes you want something new and interesting.

**xaringanthemer** makes it easy to use [Google Fonts][google-fonts] in your presentations (well, as long as you have an internet connection) or to fully specify your font files.

To use [Google Fonts][google-fonts], set the `_font_google` theme arguments --
```{r results='asis', echo=FALSE} 
cat(paste0("`", tvv[grepl("_font_google$", tvv)], "`", collapse = ", "))
```
--- using the `google_font()` helper. 
See `?google_font` for more info.

```r
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 `xxx_font_google` theme arguments, then `xxx_font_family`, `xxx_font_weight` and `xxx_font_url` are overwritten -- where `xxx` in `{header, text, code}`.
Of course, you can manually set `header_font_url`, etc., and ignore the `header_font_google` argument.

For example, suppose you want to use a ligature font for the code font, such as [Fira Code](https://github.com/yihui/xaringan/issues/83).
Just set `code_font_family` and `code_font_url`!

```r
solarized_dark(
  code_font_family = "Fira Code",
  code_font_url = "https://cdn.rawgit.com/tonsky/FiraCode/1.204/distr/fira_code.css"
)
```

If you need to import additional fonts for use in [custom CSS definitions](#adding-custom-css), you can use the `extra_fonts` argument to pass a list of URLs or `google_font()`s.

```r
mono_light(
  extra_fonts = list(google_font("Sofia")),
  extra_css = list(".title-slide h2" = list("font-family" = "Sofia"))
)
```

***

**xaringanthemer** was built by [Garrick Aden-Buie](https://www.garrickadenbuie.com) ([&commat;grrrck](https://twitter.com/grrrck)).

Big thank you to [Yihui Xie](https://yihui.name), especially for [xaringan].
Also thanks to [Ole Petter Bang](http://gnab.org) for [remark.js][remarkjs].

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!