Przeglądaj źródła

Add write_extra_css and extra_css parameters

Also fixed an issue with `outfile` argument not getting passed back to write_xaringan_theme!
tags/v0.1.1
Garrick Aden-Buie 8 lat temu
rodzic
commit
1372aa7a7e
30 zmienionych plików z 355 dodań i 34 usunięć
  1. +1
    -0
      NAMESPACE
  2. +3
    -1
      R/duo.R
  3. +3
    -1
      R/duo_accent.R
  4. +3
    -1
      R/duo_accent_inverse.R
  5. +3
    -1
      R/mono_accent.R
  6. +3
    -1
      R/mono_accent_inverse.R
  7. +3
    -1
      R/mono_dark.R
  8. +3
    -1
      R/mono_light.R
  9. +3
    -1
      R/solarized_dark.R
  10. +3
    -1
      R/solarized_light.R
  11. +1
    -0
      R/utils.R
  12. +65
    -0
      R/write_extra_css.R
  13. +4
    -1
      R/write_theme.R
  14. +49
    -1
      README.Rmd
  15. +50
    -2
      README.md
  16. +3
    -1
      inst/scripts/generate_theme_functions.R
  17. +1
    -0
      inst/scripts/write_xaringan_theme_body.R
  18. +3
    -0
      man-roxygen/extra_css.R
  19. +6
    -2
      man/duo.Rd
  20. +6
    -2
      man/duo_accent.Rd
  21. +6
    -2
      man/duo_accent_inverse.Rd
  22. +6
    -2
      man/mono_accent.Rd
  23. +6
    -2
      man/mono_accent_inverse.Rd
  24. +6
    -2
      man/mono_dark.Rd
  25. +6
    -2
      man/mono_light.Rd
  26. +6
    -2
      man/solarized_dark.Rd
  27. +6
    -2
      man/solarized_light.Rd
  28. +25
    -0
      man/write_extra_css.Rd
  29. +6
    -2
      man/write_xaringan_theme.Rd
  30. +66
    -0
      tests/testthat/test-list2css.R

+ 1
- 0
NAMESPACE Wyświetl plik

export(mono_light) export(mono_light)
export(solarized_dark) export(solarized_dark)
export(solarized_light) export(solarized_light)
export(write_extra_css)
export(write_xaringan_theme) export(write_xaringan_theme)
importFrom(grDevices,col2rgb) importFrom(grDevices,col2rgb)
importFrom(grDevices,hsv) importFrom(grDevices,hsv)

+ 3
- 1
R/duo.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template duo #' @template duo
#' @family Duotone themes #' @family Duotone themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/duo_accent.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template duo_accent #' @template duo_accent
#' @family Duotone themes #' @family Duotone themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/duo_accent_inverse.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template duo_accent_inverse #' @template duo_accent_inverse
#' @family Duotone themes #' @family Duotone themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/mono_accent.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template mono_accent #' @template mono_accent
#' @family Monotone themes #' @family Monotone themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/mono_accent_inverse.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template mono_accent_inverse #' @template mono_accent_inverse
#' @family Monotone themes #' @family Monotone themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/mono_dark.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template mono_dark #' @template mono_dark
#' @family Monotone themes #' @family Monotone themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/mono_light.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template mono_light #' @template mono_light
#' @family Monotone themes #' @family Monotone themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/solarized_dark.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template solarized_dark #' @template solarized_dark
#' @family Solarized themes #' @family Solarized themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 3
- 1
R/solarized_light.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template solarized_light #' @template solarized_light
#' @family Solarized themes #' @family Solarized themes
#' @export #' @export
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R # DO NOT EDIT - Generated from inst/scripts/generate_theme_functions.R

+ 1
- 0
R/utils.R Wyświetl plik

call_write_xaringan_theme <- function() { call_write_xaringan_theme <- function() {
paste0("write_xaringan_theme(", paste0("write_xaringan_theme(",
paste(template_variables$variable, collapse = ", "), paste(template_variables$variable, collapse = ", "),
", extra_css, outfile",
")") ")")
} }



+ 65
- 0
R/write_extra_css.R Wyświetl plik

#' Write Extra CSS arguments
#'
#' Manually adds css elements to target `outfile`.
#'
#' @section css list:
#' The `css` input must be a named list of css properties and values within a
#' named list of class identifiers, for example
#' `list(".class-id" = list("css-property" = "value"))`.
#'
#' @param css A named list of CSS definitions each containing a named list
#' of CSS property-value pairs, i.e.
#' `list(".class-id" = list("css-property" = "value"))`
#' @inheritParams write_xaringan_theme
#' @export
write_extra_css <- function(css, outfile = "xaringan-themer.css") {
cat("\n\n/* Extra CSS */", list2css(css), file = outfile,
append = TRUE, sep = "\n")
}

#' @inheritParams write_extra_css
#' @keywords internal
list2css <- function(css) {
`%.%` <- function(x, y) paste0(x, y)
error <- NULL
if (is.null(names(css))) {
stop("All elements in `css` list must be named", call. = FALSE)
}
if (purrr::vec_depth(css) != 3) {
stop("`css` list must be a named list within a named list, e.g.:\n",
' list(".class-id" = list("css-property" = "value"))')
}
if (any(names(css) == "")) {
not_named <- which(names(css) == "")
if (length(not_named) > 1) stop(call. = FALSE,
"All elements in `css` list must be named. Items ",
paste(not_named, collapse = ", "), " are unnamed."
) else stop(call. = FALSE,
"All elements in `css` list must be named. Item ", not_named, " is not named.")
}
child_unnamed <- purrr::map_lgl(purrr::map(css, ~ {is.null(names(.)) || names(.) == ""}), ~ any(.))
if (any(child_unnamed)) {
has_unnamed <- names(css)[child_unnamed]
msg <- paste(
"All properties of elements in `css` list must be named.",
if (length(has_unnamed) > 1) "Elements" else "Element",
paste(has_unnamed, collapse = ", "),
if (length(has_unnamed) > 1) "have" else "has",
"unnamed property or properties."
)
stop(msg, call. = FALSE)
}

purrr::map_chr(names(css), function(el) {
paste(sep = "\n",
el %.% " {",
paste(
purrr::map_chr(names(css[[el]]), function(prop) {
" " %.% prop %.% ': ' %.% css[[el]][[prop]] %.% ';'
}),
collapse = "\n"
),
"}"
)
})
}

+ 4
- 1
R/write_theme.R Wyświetl plik

#' @param code_font_family Code Font Family, defaults to 'Source Code Pro' #' @param code_font_family Code Font Family, defaults to 'Source Code Pro'
#' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700 #' @param code_font_url Code Font URL, defaults to https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700
#' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco #' @param code_font_family_fallback Code Font Fallback, defaults to 'Lucida Console', Monaco
#' @param outfile Customized xaringan CSS output file name
#' @template extra_css
#' @param outfile Customized xaringan CSS output file name, default is "xaringan-themer.css"
#' @template write_xaringan_theme #' @template write_xaringan_theme
#' @export #' @export
write_xaringan_theme <- function( write_xaringan_theme <- function(
code_font_family = "'Source Code Pro'", code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco", code_font_family_fallback = "'Lucida Console', Monaco",
extra_css = NULL,
outfile = "xaringan-themer.css" outfile = "xaringan-themer.css"
) { ) {
# Make sure font names are wrapped in quotes if they have spaces # Make sure font names are wrapped in quotes if they have spaces
template <- paste(template, collapse = "\n") template <- paste(template, collapse = "\n")
x <- glue::glue(template, .open = "{{", .close = "}}") x <- glue::glue(template, .open = "{{", .close = "}}")
cat(x, file = outfile) cat(x, file = outfile)
if (!is.null(extra_css)) write_extra_css(extra_css, outfile)
outfile outfile
} }

+ 49
- 1
README.Rmd Wyświetl plik

fig.path = "man/figures/README-", fig.path = "man/figures/README-",
out.width = "100%" out.width = "100%"
) )
library(xaringanthemer)
``` ```
# xaringanthemer # xaringanthemer


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


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


countIncrementalSlides: false countIncrementalSlides: false
``` ```


### Fully Customized
## Theme Settings


The theme functions listed above are just wrappers around the central function of this package, `write_xaringan_theme()`. 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. If you want to start from the default **xaringan** theme and make a few modifications, start there.
cat(paste0("- `", tvv[grepl("^title_slide_", tvv)], "`"), sep = "\n") 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 ## Fonts


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

+ 50
- 2
README.md Wyświetl plik

- [Monotone](#monotone) - [Monotone](#monotone)
- [Duotone](#duotone) - [Duotone](#duotone)
- [Solarized](#solarized) - [Solarized](#solarized)
- [Fully Customized](#fully-customized)
- [Theme Settings](#theme-settings)
- [Adding Custom CSS](#adding-custom-css)
- [Fonts](#fonts) - [Fonts](#fonts)


## Installation ## Installation
countIncrementalSlides: false countIncrementalSlides: false
``` ```


### Fully Customized
## Theme Settings


The theme functions listed above are just wrappers around the central The theme functions listed above are just wrappers around the central
function of this package, `write_xaringan_theme()`. If you want to start function of this package, `write_xaringan_theme()`. If you want to start
- `title_slide_background_color` - `title_slide_background_color`
- `title_slide_background_image` - `title_slide_background_image`


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

``` css
/* Extra CSS */
.red {
color: red;
}
.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 color text red `.red[like this]` or write
`.small[in smaller font size]`.

## Fonts ## Fonts


Yihui picked out great fonts for the default **xaringan** theme, but Yihui picked out great fonts for the default **xaringan** theme, but

+ 3
- 1
inst/scripts/generate_theme_functions.R Wyświetl plik

as.character( as.character(
glue::glue_data( glue::glue_data(
tv, "#' @param {variable} {description}, defaults to {stringr::str_replace_all(default, '[{{}}]', '`')}")) %,% tv, "#' @param {variable} {description}, defaults to {stringr::str_replace_all(default, '[{{}}]', '`')}")) %,%
"#' @param outfile Customized xaringan CSS output file name" %,%
"#' @template extra_css" %,%
"#' @param outfile Customized xaringan CSS output file name, default is \"xaringan-themer.css\"" %,%
c(...) %,% c(...) %,%
glue::glue("{f_name} <- function(") %,% glue::glue("{f_name} <- function(") %,%
as.character(glue::glue_data( as.character(glue::glue_data(
tv, " {variable} = {ifelse(!stringr::str_detect(default, '^[{].+[}]$'), paste0('\"', default, '\"'), stringr::str_replace_all(default, '[{}]', ''))},")) %,% tv, " {variable} = {ifelse(!stringr::str_detect(default, '^[{].+[}]$'), paste0('\"', default, '\"'), stringr::str_replace_all(default, '[{}]', ''))},")) %,%
" extra_css = NULL," %,%
" outfile = \"xaringan-themer.css\"" %,% " outfile = \"xaringan-themer.css\"" %,%
") {" ") {"
if (!is.null(body)) x <- c(x, body, "}") if (!is.null(body)) x <- c(x, body, "}")

+ 1
- 0
inst/scripts/write_xaringan_theme_body.R Wyświetl plik

template <- paste(template, collapse = "\n") template <- paste(template, collapse = "\n")
x <- glue::glue(template, .open = "{{", .close = "}}") x <- glue::glue(template, .open = "{{", .close = "}}")
cat(x, file = outfile) cat(x, file = outfile)
if (!is.null(extra_css)) write_extra_css(extra_css, outfile)
outfile outfile

+ 3
- 0
man-roxygen/extra_css.R Wyświetl plik

#' @param extra_css A named list of CSS definitions each containing a named list
#' of CSS property-value pairs, i.e.
#' `list(".class-id" = list("css-property" = "value"))`

+ 6
- 2
man/duo.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
A duotone theme designed to work well with two complementary A duotone theme designed to work well with two complementary

+ 6
- 2
man/duo_accent.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
An default xaringan theme with a two colors used for color An default xaringan theme with a two colors used for color

+ 6
- 2
man/duo_accent_inverse.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
An "inverted" default xaringan theme with a two colors used An "inverted" default xaringan theme with a two colors used

+ 6
- 2
man/mono_accent.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
The default xaringan theme with a single color used for color The default xaringan theme with a single color used for color

+ 6
- 2
man/mono_accent_inverse.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
An "inverted" default xaringan theme with a single color used An "inverted" default xaringan theme with a single color used

+ 6
- 2
man/mono_dark.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
A dark monotone theme based around a single color. A dark monotone theme based around a single color.

+ 6
- 2
man/mono_light.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
A light monotone theme based around a single color. A light monotone theme based around a single color.

+ 6
- 2
man/solarized_dark.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
A dark theme based around on the solarized color scheme. A dark theme based around on the solarized color scheme.

+ 6
- 2
man/solarized_light.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
A light theme based around on the solarized color scheme. A light theme based around on the solarized color scheme.

+ 25
- 0
man/write_extra_css.Rd Wyświetl plik

% Generated by roxygen2: do not edit by hand
% Please edit documentation in R/write_extra_css.R
\name{write_extra_css}
\alias{write_extra_css}
\title{Write Extra CSS arguments}
\usage{
write_extra_css(css, outfile = "xaringan-themer.css")
}
\arguments{
\item{css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
\code{list(".class-id" = list("css-property" = "value"))}}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
}
\description{
Manually adds css elements to target \code{outfile}.
}
\section{css list}{

The \code{css} input must be a named list of css properties and values within a
named list of class identifiers, for example
\code{list(".class-id" = list("css-property" = "value"))}.
}


+ 6
- 2
man/write_xaringan_theme.Rd Wyświetl plik

header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz", header_font_url = "https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz",
code_font_google = NULL, code_font_family = "'Source Code Pro'", code_font_google = NULL, code_font_family = "'Source Code Pro'",
code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700", code_font_url = "https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700",
code_font_family_fallback = "'Lucida Console', Monaco",
code_font_family_fallback = "'Lucida Console', Monaco", extra_css = NULL,
outfile = "xaringan-themer.css") outfile = "xaringan-themer.css")
} }
\arguments{ \arguments{


\item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco} \item{code_font_family_fallback}{Code Font Fallback, defaults to 'Lucida Console', Monaco}


\item{outfile}{Customized xaringan CSS output file name}
\item{extra_css}{A named list of CSS definitions each containing a named list
of CSS property-value pairs, i.e.
`list(".class-id" = list("css-property" = "value"))`}

\item{outfile}{Customized xaringan CSS output file name, default is "xaringan-themer.css"}
} }
\description{ \description{
Creates a customized Xaringan theme CSS file. Creates a customized Xaringan theme CSS file.

+ 66
- 0
tests/testthat/test-list2css.R Wyświetl plik

context("test-list2css.R")

test_that("list2css converts lists to css", {
css <- list(
'.remark-slide' = list(
"color" = "#FFF",
"font-size" = "30px"
)
)
expected <- '.remark-slide {\n color: #FFF;\n font-size: 30px;\n}'
expect_equal(list2css(css), expected)

css[[".new-class"]] <- list("background-color" = "#000")
expected <- c(expected, ".new-class {\n background-color: #000;\n}")
expect_equal(list2css(css), expected)
})

test_that("list2css errors if css list is not named", {
css <- list(list(
"color" = "#FFF",
"font-size" = "30px"
))
expect_error(list2css(css))
})

test_that("list2css errors if css list has unnamed elements", {
css <- list(
list(
"color" = "#FFF",
"font-size" = "30px"
),
'.test' = list(color = 'red')
)
expect_error(list2css(css))
})

test_that("list2css errors if css list has unnamed properties", {
css <- list(
".class" = list(
color = "#FFF",
"font-size" = "30px"
),
'.test' = list('red')
)
expect_error(list2css(css))

css <- list(
".class" = list(
"#FFF",
"font-size" = "30px"
),
'.test' = list('red')
)
expect_error(list2css(css))
})

test_that("list2css errors if not list within list", {
css <- list(
".class" = list(
list(color = "red"),
"font-size" = "30px"
),
'.test' = list('red')
)
expect_error(list2css(css))
})

Ładowanie…
Anuluj
Zapisz