- Update license, description - Add documentation, images and gifstags/v0.1.1
| @@ -1,3 +1,4 @@ | |||
| ^.*\.Rproj$ | |||
| ^\.Rproj\.user$ | |||
| ^README\.Rmd$ | |||
| ^LICENSE\.md$ | |||
| @@ -1,18 +1,23 @@ | |||
| Package: xaringanthemer | |||
| Type: Package | |||
| Title: What the Package Does (Title Case) | |||
| Title: Xaringan CSS Theme Generator | |||
| Version: 0.0.0.9000 | |||
| Author: Who wrote it | |||
| Maintainer: The package maintainer <yourself@somewhere.net> | |||
| Description: More about what it does (maybe more than one line) | |||
| Use four spaces when indenting paragraphs within the Description. | |||
| License: What license is it under? | |||
| Date: 2018-04-16 | |||
| Authors@R: person("Garrick", "Aden-Buie", email = "g.adenbuie@gmail.com", role = c("aut", "cre")) | |||
| Description: Create and edit your xaringan CSS files from within your R | |||
| R Markdown slide source. More technically, this package actually creates | |||
| valid remarkjs CSS themes that are easily used by xarangan. | |||
| License: MIT + file LICENSE | |||
| URL: https://github.com/gadenbuie/xaringanthemer | |||
| BugReports: https://github.com/gadenbuie/xaringanthemer/issues | |||
| Encoding: UTF-8 | |||
| LazyData: true | |||
| RoxygenNote: 6.0.1 | |||
| Roxygen: list(markdown = TRUE) | |||
| Suggests: | |||
| testthat | |||
| testthat, | |||
| xaringan, | |||
| here | |||
| Imports: | |||
| purrr, | |||
| tibble, | |||
| @@ -0,0 +1,2 @@ | |||
| YEAR: 2018 | |||
| COPYRIGHT HOLDER: Garrick Aden-Buie | |||
| @@ -0,0 +1,21 @@ | |||
| # MIT License | |||
| Copyright (c) 2018 Garrick Aden-Buie | |||
| Permission is hereby granted, free of charge, to any person obtaining a copy | |||
| of this software and associated documentation files (the "Software"), to deal | |||
| in the Software without restriction, including without limitation the rights | |||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | |||
| copies of the Software, and to permit persons to whom the Software is | |||
| furnished to do so, subject to the following conditions: | |||
| The above copyright notice and this permission notice shall be included in all | |||
| copies or substantial portions of the Software. | |||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | |||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | |||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | |||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | |||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | |||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | |||
| SOFTWARE. | |||
| @@ -16,20 +16,28 @@ knitr::opts_chunk$set( | |||
| [xaringan]: https://github.com/yihui/xaringan | |||
| Easily style your [xaringan] slides with **xaringanthemer** | |||
| Easily style your [xaringan] slides with **xaringanthemer**. | |||
|  | |||
| ```{r toc, results='asis', echo=FALSE, message=FALSE} | |||
| devtools::source_gist("c83e078bf8c81b035e32c3fc0cf04ee8", filename = 'render_toc.R') | |||
| x <- render_toc("README.Rmd", toc_depth = 3) | |||
| gsub(" -", "-", sub("^-.+?\n", "", x)) | |||
| ``` | |||
| ## Installation | |||
| Currently, this is a work in progress. | |||
| Try it yourself: | |||
| **xaringanthemer** lives here on GitHub. | |||
| ```r | |||
| # install.packages("devtools") | |||
| devtools::install_github("gadenbuie/xaringanthemer") | |||
| ``` | |||
| ## Make it work | |||
| ## Quick Intro | |||
| To make it work, add `css: xaringan-themed.css` to your xaringan slides YAML header under `xaringan::moonreader:` | |||
| First, add `css: xaringan-themed.css` to your xaringan slides YAML header under `xaringan::moonreader:`. | |||
| ```yaml | |||
| output: | |||
| @@ -38,50 +46,92 @@ output: | |||
| css: xaringan-themed.css | |||
| ``` | |||
| Then, in the first knitr chunk, try this: | |||
| Then, in the first knitr chunk, load **xaringanthemer** and try one of the [theme functions](#themes). | |||
| ````markdown | |||
| ```{r setup}`r ""` | |||
| ```{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") | |||
| text_font_google = google_font("Montserrat", "300", "300i"), | |||
| code_font_google = google_font("Droid Mono") | |||
| ) | |||
| ``` | |||
| ```` | |||
|  | |||
| ## Monotone Themes | |||
| **xaringanthemer** is <kbd>Tab</kbd> friendly -- [use autocomplete to explore](#fully-customized) the 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 | |||
| #### `mono_light()` | |||
| A light theme based around a single color | |||
|  | |||
| - `mono_dark()`: A dark theme based around a single color | |||
| #### `mono_dark()` | |||
| - `mono_accent()`: The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.) | |||
| A dark theme based around a single color | |||
| - `mono_accent_inverse()`: An "inverted" default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.) | |||
|  | |||
| ## Duotone Themes | |||
| #### `mono_accent()` | |||
| The default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.) | |||
|  | |||
| #### `mono_accent_inverse()` | |||
| An "inverted" default xaringan theme with a single color used for color accents on select elements (headers, bold text, etc.) | |||
|  | |||
| ### Duotone | |||
| These themes build from two (ideally) complementary colors. | |||
| - `duo()`: A two-colored theme based on a primary and secondary color. | |||
| #### `duo()` | |||
| A two-colored theme based on a primary and secondary color. | |||
| - `duo_accent()`: The default Xaringan theme with two accent colors. | |||
|  | |||
| - `duo_accent_inverse()`: An "inverted" default Xaringan theme with two accent colors. | |||
| #### `duo_accent()` | |||
| ## Solarized | |||
| The default Xaringan theme with two accent colors. | |||
|  | |||
| #### `duo_accent_inverse()` | |||
| An "inverted" default Xaringan theme with two accent colors. | |||
|  | |||
| ### 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()` | |||
|  | |||
| #### `solarized_dark()` | |||
|  | |||
| To do this, your YAML header should look more-or-less like this: | |||
| ```yaml | |||
| @@ -94,3 +144,74 @@ output: | |||
| highlightLines: true | |||
| countIncrementalSlides: false | |||
| ``` | |||
| ### Fully Customized | |||
| 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. | |||
| 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") | |||
| ``` | |||
| ## 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" | |||
| ) | |||
| ``` | |||
| *** | |||
| **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]. | |||
| 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! | |||
| @@ -4,20 +4,32 @@ | |||
| # xaringanthemer | |||
| Easily style your [xaringan](https://github.com/yihui/xaringan) slides | |||
| with **xaringanthemer** | |||
| with **xaringanthemer**. | |||
|  | |||
| - [Installation](#installation) | |||
| - [Quick Intro](#quick-intro) | |||
| - [Themes](#themes) | |||
| - [Monotone](#monotone) | |||
| - [Duotone](#duotone) | |||
| - [Solarized](#solarized) | |||
| - [Fully Customized](#fully-customized) | |||
| - [Fonts](#fonts) | |||
| ## Installation | |||
| Currently, this is a work in progress. Try it yourself: | |||
| **xaringanthemer** lives here on GitHub. | |||
| ``` r | |||
| # install.packages("devtools") | |||
| devtools::install_github("gadenbuie/xaringanthemer") | |||
| ``` | |||
| ## Make it work | |||
| ## Quick Intro | |||
| To make it work, add `css: xaringan-themed.css` to your xaringan slides | |||
| YAML header under `xaringan::moonreader:` | |||
| First, add `css: xaringan-themed.css` to your xaringan slides YAML | |||
| header under `xaringan::moonreader:`. | |||
| ``` yaml | |||
| output: | |||
| @@ -26,51 +38,83 @@ output: | |||
| css: xaringan-themed.css | |||
| ``` | |||
| Then, in the first knitr chunk, try this: | |||
| Then, in the first knitr chunk, load **xaringanthemer** and try one of | |||
| the [theme functions](#themes). | |||
| ```` markdown | |||
| ```{r setup} | |||
| ```{r setup, include = FALSE} | |||
| 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") | |||
| text_font_google = google_font("Montserrat", "300", "300i"), | |||
| code_font_google = google_font("Droid Mono") | |||
| ) | |||
| ``` | |||
| ```` | |||
|  | |||
| ## Monotone Themes | |||
| **xaringanthemer** is <kbd>Tab</kbd> friendly – [use autocomplete to | |||
| explore](#fully-customized) the 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 | |||
| #### `mono_light()` | |||
| A light theme based around a single color | |||
|  | |||
| #### `mono_dark()` | |||
| - `mono_dark()`: A dark theme based around a single color | |||
| A dark theme based around a single color | |||
| - `mono_accent()`: The default xaringan theme with a single color used | |||
| for color accents on select elements (headers, bold text, etc.) | |||
|  | |||
| - `mono_accent_inverse()`: An “inverted” default xaringan theme with a | |||
| single color used for color accents on select elements (headers, | |||
| bold text, etc.) | |||
| #### `mono_accent()` | |||
| ## Duotone Themes | |||
| The default xaringan theme with a single color used for color accents on | |||
| select elements (headers, bold text, etc.) | |||
|  | |||
| #### `mono_accent_inverse()` | |||
| An “inverted” default xaringan theme with a single color used for color | |||
| accents on select elements (headers, bold text, etc.) | |||
|  | |||
| ### Duotone | |||
| These themes build from two (ideally) complementary colors. | |||
| - `duo()`: A two-colored theme based on a primary and secondary color. | |||
| #### `duo()` | |||
| A two-colored theme based on a primary and secondary color. | |||
| - `duo_accent()`: The default Xaringan theme with two accent colors. | |||
|  | |||
| - `duo_accent_inverse()`: An “inverted” default Xaringan theme with | |||
| two accent colors. | |||
| #### `duo_accent()` | |||
| ## Solarized | |||
| The default Xaringan theme with two accent colors. | |||
|  | |||
| #### `duo_accent_inverse()` | |||
| An “inverted” default Xaringan theme with two accent colors. | |||
|  | |||
| ### Solarized | |||
| There are also two themes based around the [solarized color | |||
| palette](http://ethanschoonover.com/solarized), `solarized_light()` and | |||
| @@ -78,6 +122,14 @@ palette](http://ethanschoonover.com/solarized), `solarized_light()` and | |||
| highlighting theme to `solarized-light` or `solarized-dark` (looks great | |||
| paired or constrasted). | |||
| #### `solarized_light()` | |||
|  | |||
| #### `solarized_dark()` | |||
|  | |||
| To do this, your YAML header should look more-or-less like this: | |||
| ``` yaml | |||
| @@ -90,3 +142,88 @@ output: | |||
| highlightLines: true | |||
| countIncrementalSlides: false | |||
| ``` | |||
| ### Fully Customized | |||
| 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. | |||
| 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: | |||
| - `text_color` | |||
| - `text_bold_color` | |||
| - `text_slide_number_color` | |||
| - `text_size` | |||
| - `text_size_h1` | |||
| - *and more …* | |||
| And here are the title slide theme options: | |||
| - `title_slide_text_color` | |||
| - `title_slide_background_color` | |||
| - `title_slide_background_image` | |||
| ## Fonts | |||
| 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](https://fonts.google.com) in your presentations (well, as long as | |||
| you have an internet connection) or to fully specify your font files. | |||
| To use [Google Fonts](https://fonts.google.com), set the `_font_google` | |||
| theme arguments – `text_font_google`, `header_font_google`, | |||
| `code_font_google` — 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" | |||
| ) | |||
| ``` | |||
| ----- | |||
| **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). | |||
| 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\! | |||