Title: | Extras and Extensions for 'xaringan' Slides |
---|---|
Description: | Extras and extensions for 'xaringan' slides. Navigate your slides with tile view. Make your slides editable, live! Announce slide changes with subtle tones. Animate slide transitions with 'animate.css'. Add tabbed panels to slides with 'panelset'. Use the 'Tachyons CSS' utility toolkit for rapid slide development. Scribble on your slides. Add a copy button to your code chunks with 'clipboard'. Add a logo or top or bottom banner to every slide. Broadcast slides to stay in sync with remote viewers. Include yourself in your slides with 'webcam'. Plus a whole lot more! |
Authors: | Garrick Aden-Buie [aut, cre] |
Maintainer: | Garrick Aden-Buie <[email protected]> |
License: | MIT + file LICENSE |
Version: | 0.8.0.9000 |
Built: | 2024-08-18 04:48:38 UTC |
Source: | https://github.com/gadenbuie/xaringanExtra |
Animate.css is a popular collection of CSS animations. It contains "a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness."
use_animate_css(minified = FALSE, xaringan = TRUE) html_dependency_animate_css(minified = FALSE, xaringan = TRUE) use_animate_all( style = c("slide_left", "slide_right", "slide_up", "slide_down", "roll", "fade") )
use_animate_css(minified = FALSE, xaringan = TRUE) html_dependency_animate_css(minified = FALSE, xaringan = TRUE) use_animate_all( style = c("slide_left", "slide_right", "slide_up", "slide_down", "roll", "fade") )
minified |
Should the minified or full CSS source be used? |
xaringan |
When |
style |
Animation style to be used for all slides.
|
An htmltools::tagList()
with the tile view dependencies, or an
htmltools::htmlDependency()
.
use_animate_css()
: Use animate.css in your xaringan slides.
html_dependency_animate_css()
: Returns an htmltools::htmlDependency()
with the tile
view dependencies. Most users will want to use use_animate_css()
.
use_animate_all()
: Use a default animation for all slides. Sets coupled
in an out animations for all slides that can be disabled on individual
slides by adding the class .no-animation
.
To add animate.css to your xaringan presentation, add the following code chunk to your slides' R Markdown file.
```{r xaringan-animate, echo=FALSE} xaringanExtra::use_animate_css() ``` --- class: animated fadeInLeft slideOutRight This slide fades in from the left and slides out to the right!
Note that when xaringan = TRUE
, as is the default, out animations are
only applied to slides that are exiting so that you can specify both in
and out behavior of each slide.
Or use use_animate_all()
to set default in and out animations for all
slides. Animations can be disabled for individual slides by adding the
class .no-animation
to the slide.
```{r xaringan-animate, echo=FALSE} xaringanExtra::use_animate_all("slide_left") ```
See animate.css for a full list of animations.
use_animate_css() html_dependency_animate_css()
use_animate_css() html_dependency_animate_css()
Add a "Copy Code" button for one-click code chunk copying.
use_clipboard( button_text = "Copy Code", success_text = "Copied!", error_text = "Press Ctrl+C to Copy", selector = NULL, minified = TRUE ) html_dependency_clipboardjs(minified = TRUE) html_dependency_clipboard()
use_clipboard( button_text = "Copy Code", success_text = "Copied!", error_text = "Press Ctrl+C to Copy", selector = NULL, minified = TRUE ) html_dependency_clipboardjs(minified = TRUE) html_dependency_clipboard()
button_text , success_text , error_text
|
Text (or HTML) shown in the copy button by default (button), on copy success, or in the event of an error. |
selector |
The CSS selector used to identify the elements that will
receive the copy code button. If The CSS selector should identify the parent container that holds the content to be copied. The copy button will be added as the last element in this container, and then the text of every element inside the container identified by the selector, minus the copy button text, is copied to the clipboard. |
minified |
Should the minified clipboardjs dependency be used? |
To add clipboard to your xaringan presentation or R Markdown document, add the following code chunk to your slides’ R Markdown file.
```{r xaringanExtra-clipboard, echo=FALSE} xaringanExtra::use_clipboard() ```
You can also customize the text that is shown by default when hovering
over a code chunk with the button_text
argument. Use success_text
to
specify the text shown when the copy action works, or error_text
for
the text shown when the copy action fails. If the copy action fails, the
text will still be selected, so the user can still manually press
Ctrl+C
to copy the code chunk.
These options accept raw HTML strings, so you can achieve an icon-only appearance using FontAwesome icons:
```{r xaringanExtra-clipboard, echo=FALSE} htmltools::tagList( xaringanExtra::use_clipboard( button_text = "<i class=\"fa fa-clipboard\"></i>", success_text = "<i class=\"fa fa-check\" style=\"color: #90BE6D\"></i>", error_text = "<i class=\"fa fa-times-circle\" style=\"color: #F94144\"></i>" ), rmarkdown::html_dependency_font_awesome() ) ```
An htmltools::tagList()
with the HTML dependencies required for
clipboard.
use_clipboard()
: Adds clipboard to your xaringan slides or R
Markdown HTML output.
html_dependency_clipboardjs()
: Returns an htmltools::htmlDependency()
with the
clipboard.js library. For expert use.
html_dependency_clipboard()
: Returns an htmltools::htmlDependency()
with the
clipboard dependencies for use in xaringan and R Markdown documents. Most
users will want to use use_clipboard()
instead.
https://clipboardjs.com/
use_clipboard()
use_clipboard()
Sets position for an absolutely positioned element. Setting one of top or bottom or one of left or right will "unset" the other. It's probably not a good idea to set both top and bottom or right and left.
css_position(top = "1em", right = "1em", left = NULL, bottom = NULL)
css_position(top = "1em", right = "1em", left = NULL, bottom = NULL)
top , right , bottom , left
|
The position of the element in distance from the top, right, bottom, or left edge of it's container element. |
An object of class css_position
that describes top
, right
,
bottom
, and left
positions.
css_position(top = "1em", right = "1em") # top right corner css_position(top = "1em", left = "1em") # top left corner css_position(bottom = 0, right = 0) # bottom right corner
css_position(top = "1em", right = "1em") # top right corner css_position(top = "1em", left = "1em") # top left corner css_position(bottom = 0, right = 0) # bottom right corner
Editable gives you a way to write directly inside your slides. Make any
element of your slides editable by using the .can-edit[...]
class. Editable
fields are reset when the slides are reloaded, but it is possible for edits
to persist across sessions (in the same browser) by giving the editable
element a .key-<NAME>
class, where <NAME>
is a unique identifier (and
valid CSS class).
use_editable(id = NULL, expires = 14) html_dependency_editable(expires = 14, id = NULL)
use_editable(id = NULL, expires = 14) html_dependency_editable(expires = 14, id = NULL)
id |
Optional. By default, when |
expires |
Editable values that also have a |
An htmltools::tagList()
with the editable dependencies, or an
htmltools::htmlDependency.
use_editable()
: Adds editable to your xaringan slides.
html_dependency_editable()
: Returns an htmltools::htmlDependency with the tile
view dependencies. Most users will want to use use_editable()
.
To make your xaringan presentations editable, add the following code chunk to your slides' R Markdown file.
```{r xaringan-editable, echo=FALSE} # Setup editable fields and only store values in the browser for one day # (by default values expire in 2 weeks). xaringanExtra::use_editable(expires = 1) ```
Then, to make a component of your slides editable, use the .can-edit[]
class.
## .can-edit[You can edit this slide title]
Editable fields that only have the .can-edit
class are reset whenever the
slides are re-loaded in your browser. If you want to store the edited
values and have them persist across browser sessions, give each editable
field a .key-<NAME>
class. Be sure to make each key unique and note that
the key name must be a valid CSS class, i.e. it cannot contain spaces.
## .can-edit.key-firstSlideTitle[Change this title and then reload the page]
Warning Editable fields may not work well with slide continuations. If your full slide builds up over several slides, you can only edit the currently visible slide. If the field has a key, however, all editable elements with the same key class are updated when the slides are loaded. In other words, you can edit the title on the first slide of a multi-part slide and reload the page to have the title applied to subsequent slides.
use_editable()
use_editable()
Embed xaringan slides in any HTML web page, such as a blogdown page or an
R Markdown website. The presentation is embedded in a responsive aspect ratio
container for seamless integration with your web page. This feature works
best when combined with use_share_again()
, but embed_xaringan()
can be
used for any xaringan presentation.
embed_xaringan( url, ratio = "16:9", border = "2px solid currentColor", max_width = NULL, margin = "1em auto", style = NULL )
embed_xaringan( url, ratio = "16:9", border = "2px solid currentColor", max_width = NULL, margin = "1em auto", style = NULL )
url |
The URL or path to the presentation to embed. |
ratio |
The ratio of the presentation, either as |
border |
The border style of the embedded |
max_width |
The max width of the |
margin |
The margin placed around the embedded |
style |
Additional CSS |
An htmltools::tagList()
with the HTML dependencies required for
share again.
# In your slides call use_share_again()
# In your slides call use_share_again()
Adds CSS extras to your slides. You can select which extras you wish to add to your slides.
use_extra_styles( hover_code_line = TRUE, mute_unhighlighted_code = TRUE, bundle_id = NULL ) html_dependency_extra_styles( hover_code_line = TRUE, mute_unhighlighted_code = TRUE, bundle_id = NULL )
use_extra_styles( hover_code_line = TRUE, mute_unhighlighted_code = TRUE, bundle_id = NULL ) html_dependency_extra_styles( hover_code_line = TRUE, mute_unhighlighted_code = TRUE, bundle_id = NULL )
hover_code_line |
Adds a hover effect for code chunks in your slides. Adds a floating pointer to the hovered line and makes the line bold. |
mute_unhighlighted_code |
On code chunks with highlights (added with
line-ending |
bundle_id |
Make the CSS bundle unique. Use this if your slides share a common resource directory and you want to include different CSS extras in different slides. |
An htmltools::htmlDependency()
with the selected additional styles.
use_extra_styles()
: Add the extra CSS styles to your slides
html_dependency_extra_styles()
: Returns an htmltools::htmlDependency()
with the
extra styles dependencies. Most users will want to use use_extra_styles()
.
use_extra_styles()
use_extra_styles()
This extension resizes the slides to match the browser window height and width. In other words, the slides are maximized to match the screen size. The primary use case for this extension is for when you want to show your slides in split screen, for example when demonstrating code in RStudio or another window. To enable fit-to-screen, press Alt/Option + F during the slideshow. To disable, reload the slides.
use_fit_screen() html_dependency_fit_screen()
use_fit_screen() html_dependency_fit_screen()
Anhtmltools::tagList()
with the fit-to-screen dependency, or an
htmltools::htmlDependency()
.
use_fit_screen()
: Use the fit-to-screen extension in your xaringan slides.
html_dependency_fit_screen()
: Returns an htmltools::htmlDependency()
with the fit
screen dependencies. Most users will want to use use_fit_screen()
.
To enable fit-to-screen, add the following code chunk to your slides:
```{r xaringan-fit-screen, echo=FALSE} xaringanExtra::use_fit_screen() ```
And then press Alt/Option + F at any point during your slide show to enable the extension.
use_fit_screen()
use_fit_screen()
FreezeFrame starts any gifs on a slide when you turn to that slide. This helps This helps alleviate the awkward pause that can happen when you turn to a slide with a gif that has already started and you have to wait until it loops back around. You can also directly click on the gif to stop or start it.
use_freezeframe( selector = "img[src$=\"gif\"]", trigger = c("click", "hover", "none"), overlay = FALSE, responsive = TRUE, warnings = TRUE ) html_dependency_freezeframe()
use_freezeframe( selector = "img[src$=\"gif\"]", trigger = c("click", "hover", "none"), overlay = FALSE, responsive = TRUE, warnings = TRUE ) html_dependency_freezeframe()
selector |
The selector used to search for |
trigger |
The trigger event to start animation for non-touch devices.
One of |
overlay |
Whether or not to display a play icon on top of the paused
image, default: |
responsive |
Whether or not to make the image responsive (100% width),
default: |
warnings |
Whether or not to issue warnings in the browser console if an image doesn't appear to be a gif. |
An htmltools::tagList()
with the FreezeFrame dependencies, or an
htmltools::htmlDependency()
.
use_freezeframe()
: Adds FreezeFrame to your xaringan slides.
html_dependency_freezeframe()
: Returns an htmltools::htmlDependency()
with the
FreezeFrame dependencies for use in xaringan and R Markdown documents.
Most users will want to use use_freezeframe()
instead.
To add FreezeFrame to your xaringan
presentation,
add the following code chunk to your slides' R Markdown file.
```{r xaringanExtra-freezeframe, echo=FALSE} xaringanExtra::use_freezeframe() ```
http://ctrl-freaks.github.io/freezeframe.js/, https://github.com/ctrl-freaks/freezeframe.js/
use_freezeframe()
use_freezeframe()
use_logo()
adds a logo to all of your slides. You can make the logo a
clickable link and choose where on the page it is placed. You can also set
which types of slides will not get the logo by default.
use_logo( image_url, width = "110px", height = "128px", position = css_position(top = "1em", right = "1em"), link_url = NULL, exclude_class = c("title-slide", "inverse", "hide_logo") ) html_dependency_logo( link_url = NULL, exclude_class = c("title-slide", "inverse", "hide_logo"), inline = NULL )
use_logo( image_url, width = "110px", height = "128px", position = css_position(top = "1em", right = "1em"), link_url = NULL, exclude_class = c("title-slide", "inverse", "hide_logo") ) html_dependency_logo( link_url = NULL, exclude_class = c("title-slide", "inverse", "hide_logo"), inline = NULL )
image_url |
The URL to the image file of your logo. In general, either a full URL or the path to the image relative to your slides file. |
width |
Width in CSS units of the logo |
height |
Height in CSS units of the logo |
position |
The position of the logo from the sides of the slide. Use
|
link_url |
Optional. If provided, your logo becomes a clickable link. |
exclude_class |
The slide classes that should not receive the logo. By
default, the title slide, inverse slides and slides with the |
inline |
In |
An htmltools::tagList()
with the Add Logo dependencies, or an
htmltools::htmlDependency()
.
use_logo()
: Adds logo to your xaringan slides.
html_dependency_logo()
: Returns an htmltools::htmlDependency()
with the tile
view dependencies. Most users will want to use use_logo()
.
To add a logo to your xaringan presentation, add the following code chunk to your slides' R Markdown file.
```{r xaringan-logo, echo=FALSE} xaringanExtra::use_logo( image_url = "https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/xaringan.png" ) ```
See the documentation for ?use_logo
for more options regarding sizing
and positioning. You can also make the logo a link using link_url
and
you can hide the logo for a particular slide by using the hide_logo
slide class.
xaringan_logo <- file.path( "https://raw.githubusercontent.com/rstudio/hex-stickers/master", "PNG/xaringan.png" ) use_logo(xaringan_logo)
xaringan_logo <- file.path( "https://raw.githubusercontent.com/rstudio/hex-stickers/master", "PNG/xaringan.png" ) use_logo(xaringan_logo)
A panelset designed for showing off code, but useful for anything really.
use_panelset(in_xaringan = NULL) style_panelset_tabs( foreground = NULL, background = NULL, ..., active_foreground = NULL, active_background = NULL, active_border_color = NULL, hover_background = NULL, hover_foreground = NULL, hover_border_color = NULL, focus_ring = NULL, separator_color = NULL, tabs_border_bottom = NULL, tabs_sideways_max_width = NULL, inactive_opacity = NULL, font_family = NULL, selector = ":root" ) style_panelset(...) html_dependency_panelset()
use_panelset(in_xaringan = NULL) style_panelset_tabs( foreground = NULL, background = NULL, ..., active_foreground = NULL, active_background = NULL, active_border_color = NULL, hover_background = NULL, hover_foreground = NULL, hover_border_color = NULL, focus_ring = NULL, separator_color = NULL, tabs_border_bottom = NULL, tabs_sideways_max_width = NULL, inactive_opacity = NULL, font_family = NULL, selector = ":root" ) style_panelset(...) html_dependency_panelset()
in_xaringan |
Set to |
foreground |
The text color of a non-active panel tab, default is
|
background , active_background , hover_background
|
Background colors for
panel tabs; in-active tabs, active tab, hovered tab. The default values are
all |
... |
Ignored or passed from |
active_foreground |
The text color of an active, as in selected, panel
tab. Default is |
active_border_color , hover_border_color
|
The color of the top border of
a tab when it is active or the color of the bottom border of a tab when it
is hovered or focused. Defaults are |
hover_foreground |
The text color of a hovered panel tab. Default is
|
focus_ring |
The outline style for the tab focus ring. |
separator_color , tabs_border_bottom
|
The border color between the tabs
and content. Default is |
tabs_sideways_max_width |
The maximum width of the tabs in sideways
mode. The default value is |
inactive_opacity |
The opacity of inactive panel tabs, default is |
font_family |
The font family to be used for the panel tabs text. Default is a monospace system font stack. |
selector |
The CSS selector used to choose which panelset is being
styled. In most cases, you can use the default selector to style all
panelsets on the page. When |
An htmltools::tagList()
with the panelset dependencies, or an
htmltools::htmlDependency()
.
use_panelset()
: Adds panelset to your xaringan slides.
style_panelset_tabs()
: Style the panelset. Returns an htmltools <style>
tag.
style_panelset()
: Deprecated, renamed style_panelset_tabs()
.
html_dependency_panelset()
: Returns an htmltools::htmlDependency()
with the tile
view dependencies. Most users will want to use use_panelset()
.
To add panelset to your xaringan presentation, add the following code chunk to your slides' R Markdown file.
```{r xaringan-panelset, echo=FALSE} xaringanExtra::use_panelset() ``` .panelset[ .panel[.panel-name[app.R] ```r hist(runif(100)) ``` ] .panel[.panel-name[About] Take a look at the R code in that other panel. ] ]
As an alternative to the “tabs above content” view, you can also use sideways panelsets where the tabs appear beside the tabbed content.
To choose this effect, add the .sideways
class to .panelset
in your
slides or R Markdown text.
.panelset.sideways[ .panel[.panel-name[ui.R] ```r # shiny ui code here... ``` ] .panel[.panel-name[server.R] ```r function(input, output, session) { # shiny server code here... } ``` ] ]
By default in sideways-mode, the tabs will appear on the left side. You
can choose to place the tabs on the right side by including both
.sideways
and .right
with .panelset
.
.panelset.sideways.right[ .panel[.panel-name[ui.R] ```r # shiny ui code here... ``` ] .panel[.panel-name[server.R] ```r function(input, output, session) { # shiny server code here... } ``` ] ]
To customize the appearance of your panels, you can use
style_panelset_tabs()
called directly in an R chunk in your slides.
```{r echo=FALSE} style_panelset_tabs(foreground = "honeydew", background = "seagreen") ```
The panelset uses opacity to soften the in-active tabs to increase the
chances that the tabs will work with your slide theme. If you decide to
change your tab colors or to use solid colored tabs, you’ll likely want
to set inactive_opacity = 1
in style_panelset()
(or the
corresponding --panel-tab-inactive-opacity
CSS variable).
Behind the scenes, style_panelset_tabs()
updates the values of custom CSS properties
that define the panelset appearance. If you’d rather work with CSS, the
default values of these properties are shown in the CSS code below. You
can copy the whole CSS block to your slides and modify the values to
customize the style to fit your presentation.
```{css echo=FALSE} .panelset { --panel-tab-foreground: currentColor; --panel-tab-background: unset; --panel-tab-active-foreground: currentColor; --panel-tab-active-background: unset; --panel-tab-active-border-color: currentColor; --panel-tab-hover-foreground: currentColor; --panel-tab-hover-background: unset; --panel-tab-hover-border-color: currentColor; --panel-tab-inactive-opacity: 0.5; --panel-tabs-border-bottom: #ddd; --panel-tab-font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; } ```
Panelset works in all R Markdown HTML outputs like HTML reports and blogdown webpages!
Panelset works in the same way as rmarkdown
’s
tabset
feature, albeit with fewer style options, but the trade-off is that it
works in a wider range of document types. Generally, as long as the
output is HTML, panelset should work.
Another advantage of panelset is that it enables deeplinking: the currently shown tab is encoded in the URL automatically, allowing users to link to open tabs. Users can also right click on a panel’s tab and select Copy Link to link directly to a specific panel’s tab, which will appear in view when visiting the copied link.
With standard R Markdown,
i.e. rmarkdown::html_document()
, you can
use the following template.
# Panelset In R Markdown! {.panelset} ## Tab One Amet enim aptent molestie vulputate pharetra vulputate primis et vivamus semper. ## Tab Two ### Sub heading one Sit etiam malesuada arcu fusce ullamcorper interdum proin tincidunt curabitur felis? ## Tab Three Adipiscing mauris egestas vitae pretium ad dignissim dictumst platea! # Another section This content won't appear in a panel.
In other, less-standard R Markdown HTML formats, you can use pandoc’s fenced divs.
::::: {.panelset} ::: {.panel} [First Tab]{.panel-name} Lorem sed non habitasse nulla donec egestas magna enim posuere fames ante diam! ::: ::: {.panel} [Second Tab]{.panel-name} Consectetur ligula taciti neque scelerisque gravida class pharetra netus lobortis quisque mollis iaculis. ::: :::::
Alternatively, you can also use raw HTML.
<div class="panelset"> <div class="panel"> <div class="panel-name">First Tab</div> <!-- Panel content --> <p>Lorem ipsum, etc, etc</p> </div> <div class="panel"> <div class="panel-name">Second Tab</div> <!-- Panel content --> <p>Lorem ipsum, etc, etc</p> </div> </div>
A common use-case for panelset is to show the code and its output in separate tabs. For example, you might want to first show the code to create a plot in the first tab, with the plot itself in a second tab. On slides where space is constrained, this approach can be useful.
To help facilitate this process, panelset provides a panelset
chunk option. When set to TRUE
, the code is included in a panel tab
named Code and the output is included in a panel tab named Output.
Note that you still need to wrap this chunk in a panelset-creating
container.
.panelset[ ```{r panelset = TRUE} list( normal = rnorm(10), uniform = runif(10), cauchy = rcauchy(10) ) ``` ]
You can also set the panelset
chunk option to a named vector, where
the source
item is the tab name for the source code and the output
item is the tab name for the code output.
```{r panelset = c(source = "ggplot2", output = "Plot")} ggplot(Orange) + aes(x = age, y = circumference, colour = Tree) + geom_point() + geom_line() + guides(colour = FALSE) + theme_bw() ```
When your code contains multiple expressions and outputs, you may also
want to set the results = "hold"
chunk option. Currently, knitr uses
results = "markup"
as the default, in which case each code expression
and output pair will generate a pair of tabs.
```{r panelset = TRUE, results="hold"} print("Oak is strong and also gives shade.") print("The lake sparkled in the red hot sun.") ```
Finally, panelset chunks also work in R Markdown documents, but they
must be encapsulated in <div class="panelset">
and </div>
<div class="panelset"> ```{r panelset = TRUE} print("Oak is strong and also gives shade.") ``` </div>
or appear inside a section with the panelset class.
### A Random Sentence {.panelset} ```{r panelset = TRUE} print("Oak is strong and also gives shade.") ```
[
list( normal = rnorm(10), uniform = runif(10), cauchy = rcauchy(10) )
]: R:%0A%60%60%60%7Br%20panelset%20=%20TRUE%7D%0Alist(%0A%20%20normal%20=%20rnorm(10),%0A%20%20uniform%20=%20runif(10),%0A%20%20cauchy%20=%20rcauchy(10)%0A)%0A%60%60%60%0A
use_panelset()
use_panelset()
Scribble lets you draw on your xaringan slides. Click the pencil icon to begin drawing. Use the eraser to remove lines from your drawing, or the trash to clear the entire canvas. Note that in order to minimize confusion, you will not be able to navigate slides while in draw or erase mode.
You may toggle the visibility of the scribble toolbox by pressing S
at
any time. Your drawings will persist when changing slides. You may save a
permanent copy of the slides with the markup by printing your presentation
(e.g. using Chrome > File > Print).
use_scribble( pen_color = "#FF0000", pen_size = 3, eraser_size = pen_size * 10, palette = NULL ) html_dependency_fabricjs(minimized = TRUE) html_dependency_scribble(pen_color, pen_size, eraser_size, palette = NULL)
use_scribble( pen_color = "#FF0000", pen_size = 3, eraser_size = pen_size * 10, palette = NULL ) html_dependency_fabricjs(minimized = TRUE) html_dependency_scribble(pen_color, pen_size, eraser_size, palette = NULL)
pen_color |
Initial pen color (default is |
pen_size |
Pen size (default is 3). |
eraser_size |
Eraser size (default is |
palette |
A selection of up to 10 colors that become available when
drawing is active via the keys |
minimized |
Use the minimized |
An htmltools::tagList()
with the scribble dependencies, or an
htmltools::htmlDependency()
.
use_scribble()
: Adds scribble to your xaringan slides.
html_dependency_fabricjs()
: Returns an htmltools::htmlDependency()
with the
fabric.js
dependencies for use in xaringan and R Markdown documents.
Most users will want to use use_scribble()
instead.
html_dependency_scribble()
: Returns an htmltools::htmlDependency()
with the
scribble dependencies for use in xaringan and R Markdown documents. Most
users will want to use use_scribble()
instead.
To add scribble to your xaringan
presentation,
add the following code chunk to your slides' R Markdown file.
```{r xaringan-scribble, echo=FALSE} xaringanExtra::use_scribble() ```
use_scribble()
use_scribble()
Search gives you a way to quickly search for text on slides.
use_search( position = c("bottom-left", "bottom-right", "top-left", "top-right"), case_sensitive = FALSE, show_icon = FALSE, auto_search = TRUE ) html_dependency_search( position = c("bottom-left", "bottom-right", "top-left", "top-right"), case_sensitive = FALSE, show_icon = FALSE, auto_search = TRUE ) style_search( icon_fill = "rgba(128, 128, 128, 0.5)", input_background = "rgb(204, 204, 204)", input_foreground = "black", input_border = "1px solid rgb(249, 38, 114)", match_background = "rgb(38, 220, 249)", match_foreground = "black", match_current_background = "rgb(38, 249, 68)", match_current_foreground = "black", selector = ".search" )
use_search( position = c("bottom-left", "bottom-right", "top-left", "top-right"), case_sensitive = FALSE, show_icon = FALSE, auto_search = TRUE ) html_dependency_search( position = c("bottom-left", "bottom-right", "top-left", "top-right"), case_sensitive = FALSE, show_icon = FALSE, auto_search = TRUE ) style_search( icon_fill = "rgba(128, 128, 128, 0.5)", input_background = "rgb(204, 204, 204)", input_foreground = "black", input_border = "1px solid rgb(249, 38, 114)", match_background = "rgb(38, 220, 249)", match_foreground = "black", match_current_background = "rgb(38, 249, 68)", match_current_foreground = "black", selector = ".search" )
position |
Where to place the search box. |
case_sensitive |
If |
show_icon |
Show the icon to open or close the search? |
auto_search |
Search on each keystroke ( |
icon_fill |
Color of search icon |
input_background |
Color of search input box background |
input_foreground |
Color of text in search input box |
input_border |
Border style of search input box |
match_background |
Color of match background (not current) |
match_foreground |
Color of match text (not current) |
match_current_background |
Color of current match background |
match_current_foreground |
Color of current match text |
selector |
CSS selector specifying which search bar to update (for advanced or unusual uses only) |
An htmltools::tagList()
with the search dependencies, or an
htmltools::htmlDependency()
.
use_search()
: Adds search to your xaringan slides.
html_dependency_search()
: Returns an htmltools::htmlDependency()
with the search
dependencies. Most users will want to use use_search()
.
style_search()
: Style the search input.
To add search to your xaringan presentation, add the following code chunk to your slides' R Markdown file.
```{r xaringan-search, echo=FALSE} xaringanExtra::use_search() ```
Original implementation by André Restivo
https://github.com/arestivo/remark.search
use_search()
use_search()
Slide tone plays a subtle sound when you change slides.The tones increase in pitch for each slide from a low C to a high C note. The tone pitch stays the same for incremental slides.
use_slide_tone() html_dependency_slide_tone()
use_slide_tone() html_dependency_slide_tone()
An htmltools::tagList()
with the slide tone dependencies, or an
htmltools::htmlDependency.
use_slide_tone()
: Adds slide tone to your xaringan slides.
html_dependency_slide_tone()
: Returns an htmltools::htmlDependency with the tile
view dependencies. Most users will want to use use_slide_tone()
.
To add slide tone to your xaringan presentation, add the following code chunk to your slides' R Markdown file.
```{r xaringan-slide-tone, echo=FALSE} xaringanExtra::use_slide_tone() ```
use_slide_tone()
use_slide_tone()
Change the banner style properties for a specific selector. By default, the
changes apply to all banners, but by setting selector
you can apply style
changes to the banners of specific slide styles. For example, to set the
styles for inverse slides, use selector = ".inverse"
.
style_banner( text_color = NULL, background_color = NULL, padding_horizontal = NULL, padding_vertical = NULL, height = NULL, width = NULL, font_size = NULL, font_family = NULL, z_index = NULL, selector = ":root" )
style_banner( text_color = NULL, background_color = NULL, padding_horizontal = NULL, padding_vertical = NULL, height = NULL, width = NULL, font_size = NULL, font_family = NULL, z_index = NULL, selector = ":root" )
text_color |
The color of text in the banners which may be overridden by other styles, e.g. link color, etc. The default value inherits from the primary text color of the slide. |
background_color |
The color of the banner background. By default the background is transparent. |
padding_horizontal , padding_vertical
|
The inner padding of the banner.
By default no padding is applied in the vertical direction, but |
height |
The height of the banner in a valid CSS unit. |
width |
The maximum width of each column in the banner. You can set the
width for all columns with a single valid CSS unit, or you may provide a
vector of CSS units, named |
font_size , font_family
|
The font size and family of the text in the
banner. The default font size is |
z_index |
The z-index of the banner. By default this value is 0 so that
all other content appears over the banner. To ensure the banner appears
above slide content, you can set |
selector |
A CSS selector, e.g. |
Returns a <style>
tag with the banner styles for selector
as
HTML via htmltools::HTML()
.
style_banner(text_color = "red") style_banner(text_color = "white", background_color = "red")
style_banner(text_color = "red") style_banner(text_color = "white", background_color = "red")
Tachyons is a collection of CSS utility classes that works beautifully with xaringan presentations using the 'remarkjs“ class syntax.
use_tachyons(minified = TRUE) html_dependency_tachyons(minified = TRUE)
use_tachyons(minified = TRUE) html_dependency_tachyons(minified = TRUE)
minified |
Use the minified Tachyons css file? Default is |
An htmltools::tagList()
with the tachyons dependencies, or an
htmltools::htmlDependency()
.
use_tachyons()
: Adds tachyons to your xaringan slides.
html_dependency_tachyons()
: Returns an htmltools::htmlDependency()
with the tile
view dependencies. Most users will want to use use_tachyons()
.
To add tachyons to your xaringan presentation, add the following code chunk to your slides' R Markdown file.
```{r xaringan-tachyons, echo=FALSE} xaringanExtra::use_tachyons() ```
Tachyons provides small, single-purpose CSS classes that are easily composed
to achieve larger functionality and styles. In the remarkjs content classes syntax, you
can compose classes by chaining them together. For example, the following
markdown produces a box with a washed green background (.bg-washed-green
),
a dark green border (.b--dark-green
) on all sides (.ba
) with line width
2 (.bw2
) and border radius (.br3
). The box has a shadow (.shadow-5
)
and medium-large horizontal padding (.ph4
) with a large top margin
(.mt5
).
.bg-washed-green.b--dark-green.ba.bw2.br3.shadow-5.ph4.mt5[ The only way to write good code is to write tons of bad code first. Feeling shame about bad code stops you from getting to good code .tr[ — Hadley Wickham ]]
tachyons, Tachyons Cheat Sheet
use_tachyons()
use_tachyons()
Tile view gives you a way to quickly jump between slides. Just press O at any point in your slideshow and the tile view appears. Click on a slide to jump to the slide, or press O to exit tile view.
use_tile_view() html_dependency_tile_view()
use_tile_view() html_dependency_tile_view()
An htmltools::tagList()
with the tile view dependencies, or an
htmltools::htmlDependency()
.
use_tile_view()
: Adds tile view to your xaringan slides.
html_dependency_tile_view()
: Returns an htmltools::htmlDependency()
with the tile
view dependencies. Most users will want to use use_tile_view()
.
To add tile view to your xaringan presentation, add the following code chunk to your slides' R Markdown file.
```{r xaringan-tile-view, echo=FALSE} xaringanExtra::use_tile_view() ```
use_tile_view()
use_tile_view()
Adds a banner to all the slides in your deck at the top or the bottom of the slide. You can place content in the left, center, or right portion of the banner.
use_banner( ..., bottom_left = NULL, bottom_center = NULL, bottom_right = NULL, top_left = NULL, top_center = NULL, top_right = NULL, exclude = NULL )
use_banner( ..., bottom_left = NULL, bottom_center = NULL, bottom_right = NULL, top_left = NULL, top_center = NULL, top_right = NULL, exclude = NULL )
... |
Banner styles created with |
bottom_left , top_left
|
Text or HTML to place in the left column of the top or bottom of the slide. |
bottom_center , top_center
|
Text or HTML to place in the center column at the top or the bottom of the slide. |
bottom_right , top_right
|
Text or HTML to place in the right column of the top or bottom of the slide. |
exclude |
A vector of slide classes where the banner should not be
applied. By default all slides are included, but you might want to exclude
the title and inverse slides with |
An htmltools::tagList()
with the banner dependencies, or an
htmltools::htmlDependency.
use_banner(bottom_left = "bit.ly/my-awesome-slides") use_banner( bottom_left = "bit.ly/my-awesome-slides", top_center = "My Presentation", exclude = c("title-slide", "inverse"), style_banner(text_color = "grey") )
use_banner(bottom_left = "bit.ly/my-awesome-slides") use_banner( bottom_left = "bit.ly/my-awesome-slides", top_center = "My Presentation", exclude = c("title-slide", "inverse"), style_banner(text_color = "grey") )
Experimental! Broadcast lets others follow along, in real time! Built with PeerJS, broadcast give you a unique URL to share with your viewers. Then, when they load your slides, their slides will automatically follow you as you present!
use_broadcast()
use_broadcast()
To equip your slides with broadcast capabilities, add the following
chunk to your slides’ .Rmd
file.
```{r broadcast, echo=FALSE} xaringanExtra::use_broadcast() ```
Then, host your slides online, either on a personal webpage, or through Netlify, GitHub Pages, GitLab Pages, or another service.
When you want to present, open the version of your slides hosted online in a modern browser. Then press P to enter the presenter view. Click on the Broadcast button to start broadcasting.
After a short moment, if everything works, the broadcast button will turn into a broadcast link. Share this link with your audience. When they open the link, their browser will connect with yours and from then on, whenever you advance or change slides, your viewer’s slides will move to the current slide.
Note that the broadcast link is unique and, as the presenter, is remembered for 4 hours. After 4 hours of inactivity, a new link will be generated. In general, create and share the broadcast link just before or as your event starts and certainly not more than an hour before the presentation.
PeerJS creates a direct, peer-to-peer connection between your browser and your viewer’s browsers. A third party PeerJS server is used to initially facilitate the connection using the broadcast ID to connect with the presenter’s browser.
After the connection is made, data is sent directly between browsers and the PeerJS server is no longer involved. Furthermore, at no time is any information about your presentation transmitted over the network. When you move to a slide, say for example slide 11, broadcast announces “Slide 11” to any connected viewers and JavaScript in their browser moves their presentation to slide 11.
This has two consequences:
Viewers can move around and look at slides other than the one currently active in the presenter’s browser. When the presenter changes slides, however, all viewers’ slides will move to the new slide.
If your slides involve interactivity, such as htmlwidgets or panelset, changes made in the presenter’s view aren’t replicated for viewers. Viewers will be taken to the same slide as the presenter, but they will need to click on their own to follow interactively.
It’s worth mentioning a few details. First of all, the broadcaster needs to be connected first before viewers connect. If a viewer connects before the broadcaster starts (or restarts), they should reload the link to reconnect.
Similarly, if the broadcaster reloads their slides, viewers will also need to reload to reconnect. But once everyone is connected, a message will appear for the viewer to prompt them to reconnect.
If you are the presenter and you load the broadcast link, the broadcast
will automatically reconnect and start broadcasting. If you want to view
your slides without broadcasting, just load the plain URL for the slides
without the ?broadcast=...
portion. From this view, you can restart
the broadcast from the presenter view and if the broadcast ID is still
valid that ID will be used. To reset the broadcast ID without waiting 4
hours, load your slides with ?broadcast=1
and new broadcast link will
be created at the next broadcast.
An htmltools::tagList()
with the HTML dependencies required for
broadcast.
use_broadcast()
use_broadcast()
Adds an animated progress bar to all slides.
use_progress_bar( color = "red", location = c("top", "bottom"), height = "0.25em" )
use_progress_bar( color = "red", location = c("top", "bottom"), height = "0.25em" )
color |
A valid CSS color to be used as the color of the progress bar. |
location |
One of |
height |
A valid CSS unit specifying the height of the progress bar. |
An htmltools::tagList()
with the HTML dependencies required for
progress bar.
xaringanExtra::use_progress_bar("red", "top", "0.25em")
xaringanExtra::use_progress_bar("red", "top", "0.25em")
Load multiple xaringanExtra extensions at once. All extensions can be loaded with this function.
use_xaringan_extra( include = c("tile_view", "animate_css", "tachyons", "panelset", "broadcast", "share_again", "scribble") )
use_xaringan_extra( include = c("tile_view", "animate_css", "tachyons", "panelset", "broadcast", "share_again", "scribble") )
include |
Character vector of extensions to include. One or more of
|
An htmltools::tagList()
with the htmltools::htmlDependency()
s
for the requested extensions.
use_xaringan_extra(c("tile_view", "panelset")) use_xaringan_extra(c("tile_view", "scribble", "share_again"))
use_xaringan_extra(c("tile_view", "panelset")) use_xaringan_extra(c("tile_view", "scribble", "share_again"))
Add a live video of your webcam into your slides (in your own browser only). Useful when you are presenting via video conference to include your video, or when you are recording a class or lecture.
use_webcam(width = 200, height = 200, margin = "1em") html_dependency_webcam(width = 200, height = 200, margin = "1em")
use_webcam(width = 200, height = 200, margin = "1em") html_dependency_webcam(width = 200, height = 200, margin = "1em")
width , height
|
Width and height of the video pane in absolute CSS units,
i.e. as |
margin |
Margin around the video pane in CSS units. |
To add webcam to your xaringan presentation, add the following code chunk to your slides’ R Markdown file.
```{r} xaringanExtra::use_webcam() ```
Inside your slides, press w to turn the webcam on and off, or press Shift + W to move the video to the next corner. You can also drag and drop the video within the browser window.
An htmltools::tagList()
with the HTML dependencies required for
webcam.
use_webcam()
: Add the webcam extension to your slides
html_dependency_webcam()
: Returns an htmltools::htmlDependency()
with the webcam
dependencies. Most users will want to use use_webcam()
.
The webcam extension is based on the original webcam implementation by Yihui Xie, author of xaringan.
use_webcam()
use_webcam()