garrick
/
xaringanthemer
зеркало из https://github.com/gadenbuie/xaringanthemer.git
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Релизы 10 Вики Активность
Просмотр исходного кода

Break out documentation into child chunks

tags/v0.1.1
Garrick Aden-Buie 8 лет назад
Родитель
d03897827d
Сommit
2cd7d2e63b
14 измененных файлов: 291 добавлений и 458 удалений
Единый вид Показать статистику Diff
  1. +2
    -0
      .Rbuildignore
  2. +12
    -211
      README.Rmd
  3. +32
    -20
      README.md
  4. +0
    -2
      vignettes/css-help.Rmd
  5. +0
    -2
      vignettes/css-help.md
  6. +44
    -0
      vignettes/rmdchunks/_fonts.Rmd
  7. +6
    -0
      vignettes/rmdchunks/_installation.Rmd
  8. +38
    -0
      vignettes/rmdchunks/_quick-intro.Rmd
  9. +7
    -0
      vignettes/rmdchunks/_tagline-gif.Rmd
  10. +12
    -0
      vignettes/rmdchunks/_thanks.Rmd
  11. +123
    -0
      vignettes/rmdchunks/_themes.Rmd
  12. +0
    -2
      vignettes/template-variables.Rmd
  13. +0
    -2
      vignettes/template-variables.md
  14. +15
    -219
      vignettes/xaringanthemer.Rmd

+ 2
- 0
.Rbuildignore Просмотреть файл

^README\.Rmd$ ^README\.Rmd$
^LICENSE\.md$ ^LICENSE\.md$
^make\.R$ ^make\.R$
^vignettes/singles$
^tests_$

+ 12
- 211
README.Rmd Просмотреть файл

``` ```
# xaringanthemer # xaringanthemer


[xaringan]: https://github.com/yihui/xaringan
[remarkjs]: https://github.com/gnab/remark
[template-variables]: vignettes/template-variables.md

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


![](vignettes/images/examples.gif)
```{r child="vignettes/rmdchunks/_tagline-gif.Rmd"}
```


```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE} ```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE}
devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R')


## Installation ## Installation


**xaringanthemer** lives here on GitHub.

```r
# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanthemer")
```{r child="vignettes/rmdchunks/_installation.Rmd"}
``` ```


## Quick Intro ## 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)
[theme-functions]: #themes
[theme-settings]: #theme-settings
[template-variables]: vignettes/template-variables.md


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")
)
```{r child="vignettes/rmdchunks/_quick-intro.Rmd"}
``` ```
````

![](vignettes/images/example_mono_light_1c5253.png)

**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!

<center><img src="vignettes/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 ## 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)
```

![](vignettes/images/example_mono_light.png)

#### `mono_dark()`

A dark theme based around a single color.

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

![](vignettes/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)
```

![](vignettes/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)
```

![](vignettes/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)
```

![](vignettes/images/example_duo.png)

#### `duo_accent()`

The default Xaringan theme with two accent colors.

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

![](vignettes/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)
```

![](vignettes/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)
```

![](vignettes/images/example_solarized_light.png)

#### `solarized_dark()`

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

![](vignettes/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
```{r child="vignettes/rmdchunks/_themes.Rmd"}
``` ```


## Theme Settings ## Theme Settings
Here are some of the `text_` theme options: Here are some of the `text_` theme options:


```{r, results='asis', echo=FALSE} ```{r, results='asis', echo=FALSE}
source("R/theme_settings.R")
source(here::here("R/theme_settings.R"))
tvv <- template_variables$variable tvv <- template_variables$variable
cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n") cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n")
cat("- *and more ...*") cat("- *and more ...*")


## Fonts ## 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.
[adding-custom-css]: #adding-custom-css


**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 = ", "))
```{r child="vignettes/rmdchunks/_fonts.Rmd"}
``` ```
--- 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")
)
```{r child="vignettes/rmdchunks/_thanks.Rmd"}
``` ```

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!

+ 32
- 20
README.md Просмотреть файл



Give your [xaringan](https://github.com/yihui/xaringan) slides some Give your [xaringan](https://github.com/yihui/xaringan) slides some
style with **xaringanthemer** within your `slides.Rmd` file without style with **xaringanthemer** within your `slides.Rmd` file without
(much) CSS.
(much)
CSS.


![](vignettes/images/examples.gif)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/examples.gif" width="100%" />


- [Installation](#installation) - [Installation](#installation)
- [Quick Intro](#quick-intro) - [Quick Intro](#quick-intro)


## Quick Intro ## Quick Intro


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

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


``` ```
```` ````


![](vignettes/images/example_mono_light_1c5253.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_light_1c5253.png" width="100%" />


**xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to **xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to
explore](#theme-settings) the [template explore](#theme-settings) the [template


<center> <center>


<img src="vignettes/images/rmarkdown-template-screenshot.png" width="350px">
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/rmarkdown-template-screenshot.png" width="350px" />


</center> </center>




#### `mono_light()` #### `mono_light()`


A light theme based around a single color.
A light theme based around a single
color.


``` r ``` r
mono_light(base_color = "#23395b") mono_light(base_color = "#23395b")
``` ```


![](vignettes/images/example_mono_light.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_light.png" width="100%" />


#### `mono_dark()` #### `mono_dark()`


A dark theme based around a single color.
A dark theme based around a single
color.


``` r ``` r
mono_dark(base_color = "#cbf7ed") mono_dark(base_color = "#cbf7ed")
``` ```


![](vignettes/images/example_mono_dark.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_dark.png" width="100%" />


#### `mono_accent()` #### `mono_accent()`


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


``` r ``` r
mono_accent(base_color = "#43418A") mono_accent(base_color = "#43418A")
``` ```


![](vignettes/images/example_mono_accent.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_accent.png" width="100%" />


#### `mono_accent_inverse()` #### `mono_accent_inverse()`


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


``` r ``` r
mono_accent_inverse(base_color = "#3C989E") mono_accent_inverse(base_color = "#3C989E")
``` ```


![](vignettes/images/example_mono_accent_inverse.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_mono_accent_inverse.png" width="100%" />


### Duotone ### Duotone




#### `duo()` #### `duo()`


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


``` r ``` r
duo(primary_color = "#1F4257", secondary_color = "#F97B64") duo(primary_color = "#1F4257", secondary_color = "#F97B64")
``` ```


![](vignettes/images/example_duo.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_duo.png" width="100%" />


#### `duo_accent()` #### `duo_accent()`


The default Xaringan theme with two accent colors.
The default Xaringan theme with two accent
colors.


``` r ``` r
duo_accent(primary_color = "#006747", secondary_color = "#CFC493") duo_accent(primary_color = "#006747", secondary_color = "#CFC493")
``` ```


![](vignettes/images/example_duo_accent.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_duo_accent.png" width="100%" />


#### `duo_accent_inverse()` #### `duo_accent_inverse()`


duo_accent_inverse(primary_color = "#006747", secondary_color = "#CFC493") duo_accent_inverse(primary_color = "#006747", secondary_color = "#CFC493")
``` ```


![](vignettes/images/example_duo_accent_inverse.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_duo_accent_inverse.png" width="100%" />


### Solarized ### Solarized


palette](http://ethanschoonover.com/solarized), `solarized_light()` and palette](http://ethanschoonover.com/solarized), `solarized_light()` and
`solarized_dark()`. For both themes, it is advisted to change the syntax `solarized_dark()`. For both themes, it is advisted to change the syntax
highlighting theme to `solarized-light` or `solarized-dark` (looks great highlighting theme to `solarized-light` or `solarized-dark` (looks great
paired or constrasted).
paired or
constrasted).


#### `solarized_light()` #### `solarized_light()`


solarized_light() solarized_light()
``` ```


![](vignettes/images/example_solarized_light.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_solarized_light.png" width="100%" />


#### `solarized_dark()` #### `solarized_dark()`


solarized_dark() solarized_dark()
``` ```


![](vignettes/images/example_solarized_dark.png)
<img src="/Users/garrickaden-buie/Dropbox/R/xaringanthemer/vignettes/images/example_solarized_dark.png" width="100%" />


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




## Fonts ## Fonts


<!-- Need to set [adding-custom-css] -->

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



+ 0
- 2
vignettes/css-help.Rmd Просмотреть файл

--- ---
title: "xaringanthemer CSS Help" title: "xaringanthemer CSS Help"
author: "Garrick Aden-Buie"
date: "2018-05-09"
output: rmarkdown::html_vignette output: rmarkdown::html_vignette
vignette: > vignette: >
%\VignetteIndexEntry{xaringanthemer CSS Help} %\VignetteIndexEntry{xaringanthemer CSS Help}

+ 0
- 2
vignettes/css-help.md Просмотреть файл

xaringanthemer CSS Help xaringanthemer CSS Help
================ ================
Garrick Aden-Buie
2018-05-09


Jump to: [Colors](#colors), [Sizes](#sizes), [Positioning](#positioning) Jump to: [Colors](#colors), [Sizes](#sizes), [Positioning](#positioning)



+ 44
- 0
vignettes/rmdchunks/_fonts.Rmd Просмотреть файл

<!-- Need to set [adding-custom-css] -->

[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"))
)
```

+ 6
- 0
vignettes/rmdchunks/_installation.Rmd Просмотреть файл

**xaringanthemer** lives here on GitHub.

```r
# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanthemer")
```

+ 38
- 0
vignettes/rmdchunks/_quick-intro.Rmd Просмотреть файл

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

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][theme-functions].

````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")
)
```
````

`r knitr::include_graphics(here::here("vignettes/images/example_mono_light_1c5253.png"))`

**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!

<center>
```{r out.width="350px"}
knitr::include_graphics(here::here("vignettes/images/rmarkdown-template-screenshot.png"))
```
</center>

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

+ 7
- 0
vignettes/rmdchunks/_tagline-gif.Rmd Просмотреть файл

[xaringan]: https://github.com/yihui/xaringan

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

```{r}
knitr::include_graphics(here::here("vignettes/images/examples.gif"))
```

+ 12
- 0
vignettes/rmdchunks/_thanks.Rmd Просмотреть файл

***

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

**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!

+ 123
- 0
vignettes/rmdchunks/_themes.Rmd Просмотреть файл

### 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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_mono_light.png"))`

#### `mono_dark()`

A dark theme based around a single color.

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

`r knitr::include_graphics(here::here("vignettes/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)
```

`r knitr::include_graphics(here::here("vignettes/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)
```

`r knitr::include_graphics(here::here("vignettes/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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_duo.png"))`

#### `duo_accent()`

The default Xaringan theme with two accent colors.

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

`r knitr::include_graphics(here::here("vignettes/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)
```

`r knitr::include_graphics(here::here("vignettes/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)
```

`r knitr::include_graphics(here::here("vignettes/images/example_solarized_light.png"))`

#### `solarized_dark()`

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

`r knitr::include_graphics(here::here("vignettes/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
```

+ 0
- 2
vignettes/template-variables.Rmd Просмотреть файл

--- ---
title: "Template Variables" title: "Template Variables"
author: "Garrick Aden-Buie"
date: "2018-05-08"
output: output:
rmarkdown::html_vignette: default rmarkdown::html_vignette: default
vignette: > vignette: >

+ 0
- 2
vignettes/template-variables.md Просмотреть файл

Template Variables Template Variables
================ ================
Garrick Aden-Buie
2018-05-08


The following table shows the template variables, their default values The following table shows the template variables, their default values
in the standard `xaringan` theme, the primary element to which the in the standard `xaringan` theme, the primary element to which the

+ 15
- 219
vignettes/xaringanthemer.Rmd Просмотреть файл

--- ---
title: "Xaringan CSS Theme Generator" title: "Xaringan CSS Theme Generator"
author: "Garrick Aden-Buie"
date: "2018-05-09"
output: rmarkdown::html_vignette output: rmarkdown::html_vignette
vignette: > vignette: >
%\VignetteIndexEntry{Overview of xaringanthemer} %\VignetteIndexEntry{Overview of xaringanthemer}
) )
library(xaringanthemer) library(xaringanthemer)
``` ```
# xaringanthemer

[xaringan]: https://github.com/yihui/xaringan [xaringan]: https://github.com/yihui/xaringan
[remarkjs]: https://github.com/gnab/remark [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} ```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE}
devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R')
x <- render_toc("README.Rmd", toc_depth = 3) x <- render_toc("README.Rmd", toc_depth = 3)
gsub(" -", "-", sub("^-.+?\n", "", x)) 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)
Jump to:
[Quick Intro](#quick-intro),
[Themes](#themes),
[Theme Settings](#theme-settings),
[Adding Custom CSS](#adding-custom-css),
[Fonts](#fonts)


## Quick Intro ## Quick Intro


First, add `css: xaringan-themer.css` to your xaringan slides YAML header under `xaringan::moonreader:`.
[theme-functions]: reference/index.html
[theme-settings]: #theme-settings
[template-variables]: articles/template-variables.html


```yaml
output:
xaringan::moon_reader:
lib_dir: libs
css: xaringan-themer.css
```{r child="rmdchunks/_quick-intro.Rmd"}
``` ```


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 ## 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
```{r child="rmdchunks/_themes.Rmd"}
``` ```


## Theme Settings ## Theme Settings
Here are some of the `text_` theme options: Here are some of the `text_` theme options:


```{r, results='asis', echo=FALSE} ```{r, results='asis', echo=FALSE}
source("../R/theme_settings.R")
source(here::here("R/theme_settings.R"))
tvv <- template_variables$variable tvv <- template_variables$variable
cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n") cat(paste0("- `", tvv[grepl("^text_", tvv)][1:5], "`"), sep = "\n")
cat("- *and more ...*") cat("- *and more ...*")


## Fonts ## 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.
[adding-custom-css]: #adding-custom-css


**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 = ", "))
```{r child="rmdchunks/_fonts.Rmd"}
``` ```
--- 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")
)
```{r child="rmdchunks/_thanks.Rmd"}
``` ```

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!

Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить