garrick
/
xaringanthemer
mirror da https://github.com/gadenbuie/xaringanthemer.git
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Rilasci 10 Wiki Attività
Sfoglia il codice sorgente

Add template variables vignette to readme

tags/v0.1.1
Garrick Aden-Buie 8 anni fa
parent
a828e2996a
commit
a14773af9d
5 ha cambiato i file con 118 aggiunte e 14 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. +15
    -3
      README.Rmd
  2. +11
    -6
      README.md
  3. +16
    -3
      vignettes/readme-vignette.Rmd
  4. +3
    -2
      vignettes/template-variables.Rmd
  5. +73
    -0
      vignettes/template-variables.md

+ 15
- 3
README.Rmd Vedi File

@@ -19,17 +19,28 @@ library(xaringanthemer)

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

Easily style your [xaringan] slides with **xaringanthemer**.

![](vignettes/images/examples.gif)

```{r toc, results='asis', echo=FALSE, message=FALSE}
```{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)

## Installation

**xaringanthemer** lives here on GitHub.
@@ -68,7 +79,7 @@ mono_light(

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

**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) the themes!
**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) 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>

@@ -205,8 +216,9 @@ output:
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.
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 loading `xaringanthemer`, type out `duo_theme(` and then press <kbd>Tab</kbd> to see all of the theme options.


+ 11
- 6
README.md Vedi File

@@ -59,7 +59,9 @@ mono_light(
![](vignettes/images/example_mono_light_1c5253.png)

**xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to
explore](#fully-customized) the
explore](#fully-customized) the [template
variables](vignettes/template-variables.md) that you can adjust in each
of the
themes\!

<center>
@@ -199,11 +201,14 @@ 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.
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 loading `xaringanthemer`, type out `duo_theme(` and
then press <kbd>Tab</kbd> to see all of the theme options.

+ 16
- 3
vignettes/readme-vignette.Rmd Vedi File

@@ -43,12 +43,22 @@ Easily style your [xaringan] slides with **xaringanthemer**.

![](images/examples.gif)

```{r toc, results='asis', echo=FALSE, message=FALSE}
```{r toc, results='asis', echo=FALSE, message=FALSE, eval=FALSE}
devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R')
x <- render_toc("readme-vignette.Rmd", toc_depth = 3)
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:`.
@@ -78,7 +88,9 @@ mono_light(

![](images/example_mono_light_1c5253.png)

**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) the themes!
**xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) 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>

@@ -217,6 +229,7 @@ If you want to start from the default **xaringan** theme and make a few modifica

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.


+ 3
- 2
vignettes/template-variables.Rmd Vedi File

@@ -2,11 +2,12 @@
title: "Template Variables"
author: "Garrick Aden-Buie"
date: "`r Sys.Date()`"
output: rmarkdown::html_vignette
output:
rmarkdown::html_vignette: default
vignette: >
%\VignetteIndexEntry{Template Variables}
%\VignetteEngine{knitr::rmarkdown}
%\VignetteEncoding{UTF-8}
%\VignetteEngine{knitr::rmarkdown}
---

```{r setup, include = FALSE}

+ 73
- 0
vignettes/template-variables.md Vedi File

@@ -0,0 +1,73 @@
Template Variables
================
Garrick Aden-Buie
2018-05-08

The following table shows the template variables, their default values
in the standard `xaringan` theme, the primary element to which the
property is applied, and a brief description of the template variable.

For example, `background_color` by default sets the `background-color`
CSS property of the `.remark-slide-content` class to `#FFF`.

Use this table to find the template variable you would like to modify.
You can also use this table to find the CSS class or element associated
with a particular template item.

Note that themes, like `mono_accent()`, have additional parameters, but
with any theme function you can override the theme by directly setting
the arguments below when calling the theme function. For example, to use
`mono_accent()` with a different slide background color, you can call
`mono_accent(background_color =
"#abc123")`.

| variable | default | element | description |
| :-------------------------------- | :------------------------------------------------------------------------------ | :------------------------------------------------------- | :-------------------------------------------------------------------------------- |
| `text_color` | `#000` | body | Text Color |
| `header_color` | `#000` | h1, h2, h3 | Header Color |
| `background_color` | `#FFF` | .remark-slide-content | Slide Background Color |
| `link_color` | `rgb(249, 38, 114)` | a, a \> code | Link Color |
| `text_bold_color` | `NA` | strong | Bold Text Color |
| `text_slide_number_color` | `inverse_background_color` | .remark-slide-number | Slide Number Color |
| `code_highlight_color` | `rgba(255,255,0,0.5)` | .remark-code-line-highlighted | Code Line Highlight |
| `code_inline_color` | `#000` | .remark-inline-code | Inline Code Color |
| `code_inline_background_color` | `NA` | .remark-inline-code | Inline Code Background Color |
| `code_inline_font_size` | `1em` | .remark-inline-code | Inline Code Text Font Size |
| `inverse_background_color` | `#272822` | .inverse | Inverse Background Color |
| `inverse_text_color` | `#d6d6d6` | .inverse | Inverse Text Color |
| `inverse_text_shadow` | `FALSE` | .inverse | Enables Shadow on text of inverse slides |
| `inverse_header_color` | `#f3f3f3` | .inverse h1, .inverse h2, .inverse h3 | Inverse Header Color |
| `title_slide_text_color` | `inverse_text_color` | .title-slide | Title Slide Text Color |
| `title_slide_background_color` | `inverse_background_color` | .title-slide | Title Slide Background Color |
| `title_slide_background_image` | `NA` | .title-slide | Title Slide Background Image URL |
| `title_slide_background_size` | `NA` | .title-slide | Title Slide Background Image Size, defaults to “cover” if background image is set |
| `title_slide_background_position` | `NA` | .title-slide | Title Slide Background Image Position |
| `footnote_color` | `NA` | .footnote | Footnote text color (if `NA`, then it will be the same color as `text_color`) |
| `footnote_font_size` | `0.9em` | .footnote | Footnote font size |
| `footnote_position_bottom` | `3em` | .footnote | Footnote location from bottom of screen |
| `left_column_subtle_color` | `#777` | .left-column h2, .left-column h3 | Left Column Text (not last) |
| `left_column_selected_color` | `#000` | .left-column h2:last-of-type, .left-column h3:last-child | Left Column Current Selection |
| `blockquote_left_color` | `lightgray` | blockquote | Blockquote Left Border Color |
| `table_border_color` | `#666` | table: border-top, border-bottom | Table top/bottom border |
| `table_row_border_color` | `#ddd` | table thead th: border-bottom | Table row inner bottom border |
| `table_row_even_background_color` | `#eee` | thead, tfoot, tr:nth-child(even) | Table Even Row Background Color |
| `text_font_size` | `20px` | .remark-slide-content | Slide Body Text Font Size |
| `header_h1_font_size` | `55px` | .remark-slide-content h1 | h1 Header Text Font Size |
| `header_h2_font_size` | `45px` | .remark-slide-content h2 | h2 Header Text Font Size |
| `header_h3_font_size` | `35px` | .remark-slide-content h3 | h3 Header Text Font Size |
| `text_slide_number_font_size` | `0.9em` | .remark-slide-number | Slide Number Text Font Size |
| `text_font_google` | `NULL` | body | Use `google_font()` to specify body font |
| `text_font_family` | `'Droid Serif'` | body | Body Text Font Family |
| `text_font_weight` | `normal` | body | Body Text Font Weight |
| `text_font_url` | `https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic` | @import url() | Body Text Font URL(s) |
| `text_font_family_fallback` | `'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC'` | body | Body Text Font Fallbacks |
| `text_font_base` | `serif` | body | Body Text Base Font (Total Failure Fallback) |
| `header_font_google` | `NULL` | body | Use `google_font()` to specify header font |
| `header_font_family` | `'Yanone Kaffeesatz'` | h1, h2, h3 | Header Font Family |
| `header_font_weight` | `normal` | h1, h2, h3 | Header Font Weight |
| `header_font_url` | `https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz` | @import url | Header Font URL |
| `code_font_google` | `NULL` | body | Use `google_font()` to specify code font |
| `code_font_family` | `'Source Code Pro'` | .remark-code, .remark-inline-code | Code Font Family |
| `code_font_size` | `0.9em` | .remark-inline | Code Text Font Size |
| `code_font_url` | `https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700` | @import url | Code Font URL |
| `code_font_family_fallback` | `'Lucida Console', Monaco` | .remark-code, .remark-inline-code | Code Font Fallback |

Write Preview
Loading…
Annulla
Salva