Repository files navigation

xaringanExtra is a playground of enhancements and extensions forxaringan slides.

• Add an overview of your presentation withtile view
• Make your slideseditable
• Share your slides in style withshare again
• Broadcast your slides in real time to viewers withbroadcast
• Scribble on your slides during your presentation withscribble
• Announce slide changes with asubtle tone
• Animate slide transitions withanimate.css
• Add tabbed panels to slides withpanelset
• Add a logo to all of your slides withlogo
• Add a top or bottom banner to all of your slides withbanner
• Add a search box to search through your slides withsearch
• Use theTachyons CSS utility toolkit
• Add a live video feed of yourwebcam
• Add one-click code copying withclipboard
• Always play gifs from the start withfreezeframe
• Fit your slides tofill the browser window
• Addextra CSS styles

Each item can be enabled separately, or load everything at once with asingle call.

```{r xaringanExtra, echo=FALSE}xaringanExtra::use_xaringan_extra(c("tile_view", "animate_css", "tachyons"))```

You can install the released version of xaringanExtra from CRAN:

install.packages("xaringanExtra")

You can install the latest development version fromGitHub:

# install.packages("remotes")remotes::install_github("gadenbuie/xaringanExtra")

or fromgadenbuie.r-universe.dev:

options(repos= c(gadenbuie='https://gadenbuie.r-universe.dev',CRAN='https://cloud.r-project.org'))install.packages('xaringanExtra')

Tile view gives you a way to quickly jump between slides. Just pressO (the letterO forOverview) at any point in yourslideshow and the tile view appears. Click on a slide to jump to theslide, or pressO to exit tile view.

To add tile view to your xaringan presentation, add the following codechunk to your slides’ R Markdown file.

```{r xaringan-tile-view, echo=FALSE}xaringanExtra::use_tile_view()```

Tile view is heavily inspired by (and is essentially a port to VanillaJavaScript of)a jQuery remarkjshook by the same namebyStephen Hesperus.

Editable gives you a way to write directly inside your slides, updatingyour content live. Make any element of your slides editable by using the.can-edit[...] class.

Make your slides editable with the following code chunk.

```{r xaringan-editable, echo=FALSE}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 wheneverthe slides are re-loaded in your browser. If you want to store theedited values and have them persist across browser sessions, give eacheditable field a.key-<NAME> class. Be sure to make each key uniqueand note that the key name must be a valid CSS class, i.e. it cannotcontain spaces.

##.can-edit.key-firstSlideTitle[Change this title and then reload the page]

For more complicated HTML elements, it’s best to make only spans of texteditable, such as

Hello, .can-edit[world], and welcome to my talk!

or to use placeholder text.

##A few of my favorite things.can-edit.key-likes[- thing one- thing two]

Share your slides in style withshare again! It adds a share bar toyour slides that only shows up when they’re embedded in another page.The bar adds easy slide navigation, quick access to full screen views,and a share menu for one-click (or tap!) sharing on social media sites.

Add share again to your slides in three easy steps.

1. Adduse_share_again() to your slides

   ```{r share-again, echo=FALSE}xaringanExtra::use_share_again()```

2. Style your share bar and choose social media sites

   ```{r style-share-again, echo=FALSE}xaringanExtra::style_share_again(  share_buttons = c("twitter", "linkedin", "pocket"))```

3. Embed your slides inblogdown or R Markdownwebsites

   ```{r embed-xaringan, echo=FALSE}xaringanExtra::embed_xaringan(url = "share-again.html", ratio = "4:3")```

   embed_xaringan() works withany xaringanpresentation,share again not required!

   Here’s what yourslides will looklike inan R Markdown HTML document.

Broadcast lets others follow along, in real time! Built withPeerJS,broadcast give you a unique URL toshare with your viewers. Then, when they load your slides, their slideswill automatically follow you as you present!

To equip your slides with broadcast capabilities, add the followingchunk to your slides’.Rmd file.

```{r broadcast, echo=FALSE}xaringanExtra::use_broadcast()```

Then, host your slides online, either on a personal webpage, or throughNetlify,GitHubPages,GitLabPages, or anotherservice.

When you want to present, open the version of your slides hosted onlinein a modern browser. Then pressP to enter the presenterview. Click on theBroadcast button to start broadcasting.

After a short moment, if everything works, the broadcast button willturn into a broadcast link. Share this link with your audience. Whenthey open the link, their browser will connect with yours and from thenon, whenever you advance or change slides, your viewer’s slides willmove to the current slide.

Note that the broadcast link is unique and, as the presenter, isremembered for 4 hours. After 4 hours of inactivity, a new link will begenerated. In general, create and share the broadcast link just beforeor as your event starts and certainly not more than an hour before thepresentation.

PeerJS creates a direct, peer-to-peer connection between your browserand your viewer’s browsers. A third party PeerJS server is used toinitially facilitate the connection using the broadcast ID to connectwith the presenter’s browser.

After the connection is made, data is sent directly between browsers andthe PeerJS server is no longer involved. Furthermore, at no time is anyinformation about your presentation transmitted over the network. Whenyou move to a slide, say for example slide 11,broadcast announces“Slide 11” to any connected viewers and JavaScript in their browsermoves their presentation to slide 11.

This has two consequences:

1. Viewers can move around and look at slides other than the onecurrently active in the presenter’s browser. When the presenterchanges slides, however, all viewers’ slides will move to the newslide.

2. If your slides involve interactivity, such ashtmlwidgets or [panelset], changesmade in the presenter’s view aren’t replicated for viewers. Viewerswill be taken to the same slide as the presenter, but they will needto click on their own to follow interactively.

It’s worth mentioning a few details. First of all, the broadcaster needsto be connected first before viewers connect. If a viewer connectsbefore the broadcaster starts (or restarts), they should reload the linkto reconnect.

Similarly, if the broadcaster reloads their slides, viewers will alsoneed to reload to reconnect. But once everyone is connected, a messagewill appear for the viewer to prompt them to reconnect.

If you are the presenter and you load the broadcast link, the broadcastwill automatically reconnect and start broadcasting. If you want to viewyour slides without broadcasting, just load the plain URL for the slideswithout the?broadcast=... portion. From this view, you can restartthe broadcast from the presenter view and if the broadcast ID is stillvalid that ID will be used. To reset the broadcast ID without waiting 4hours, load your slides with?broadcast=1 and new broadcast link willbe created at the next broadcast.

Scribble lets you draw on yourxaringan slides. Click thepencilicon or pressS to begin drawing. PressingS orstarting the drawing mode toggles the scribble toolbox. There, you’llfind theeraser button, which helps you remove lines from yourdrawing. Or click thetrash button to clear the drawings on thecurrent slide.

```{r xaringan-scribble, echo=FALSE}xaringanExtra::use_scribble()```

Your drawings stay with each slide when you change slides. Note that youwon’t be able to change slides while you’re in drawing mode. In fact,you can use the← and→ keys toundo orredo your drawings.

Remember that if you use slide continuations to partially reveal slidecontents, each partial slide is technically abrand-new slide as faras xaringan is concerned. This means that each partial slide will haveit’s own drawing layer and your drawings on one slide won’t carry overto the next. (But they’ll still be there when you switch back!)

To save a copy of the slide with your drawings, your best option is toprint your presentation from the browser.

Slide tone plays a subtle sound when you change slides. It wasrequested by a blind Ruser and enables users tohear an auditory signal of their progress through the slides.

The tones increase in pitch for each slide from a low C to a high Cnote. The tone pitch stays the same for incremental slides.

Visit theslide tone demoslides toexperience it yourself. Or include slide tone in your next xaringanpresentation by adding the following code chunk to your slides’ RMarkdown.

```{r xaringan-slide-tone, echo=FALSE}xaringanExtra::use_slide_tone()```

Animate.css is a popularcollection of CSS animations. It contains

a bunch of cool, fun, and cross-browser animations for you to use inyour projects. Great for emphasis, home pages, sliders, and generaljust-add-water-awesomeness.

Useuse_animate_css() to include the animate.css stylesheets in yourslides. This function automatically modifies the CSS selector thatenables the animation so that only the slides that are visible areanimated. This drastically improves performance on large slide deckswith many animations. For use in other HTML documents, setxaringan = FALSE to load the defaultanimate.css file without thisperformance tweak.

To use animate.css in your slides, add the following code chunk to yourslides’ R Markdown.

```{r xaringan-animate-css, echo=FALSE}xaringanExtra::use_animate_css()```

Then add theanimated class and thedesired animationclass to the slides you want toanimate.Out animations are only applied to slides on exit.

---class:animated slideInRight fadeOutLeft## This slide...-slides in from the right-and fades out to the left on exit

If you want to use the same slide transitions for all slides, you canuseuse_animate_all(). This function sets a default in and outanimation for all slides. Animations can be disabled for individualslides by adding the classno-animation to the slide.

```{r xaringan-animate-all, echo=FALSE}xaringanExtra::use_animate_all("slide_left")```

Note: becauseuse_animate_all() only imports the CSS required for theslide in and slide out animations, you need to also includeuse_animate_css() (see above) if you want to use other animations fromanimate.css in your slides.

Panelset adds accessible tabbed panels — just like R Markdown’s.tabset panels — to your xaringan slides. You can activate a panel byclicking on the tab, or you can use the keyboard. When you reach a slidewith a panelset, the left and right arrows will step through the panels.

To use panelset, add the following chunk to your slides.

```{r xaringan-panelset, echo=FALSE}xaringanExtra::use_panelset()```

Then, create a.panelset[...] that contains.panel[]s. Each.panel[] should have a.panel-name[] and content (everything thatisn’t the panel’s name).

.panel[.panel-name[NAME]...content...]

Here’s the example used in the demo slides.

.panelset[.panel[.panel-name[R Code]```{r panel-chunk, fig.show='hide'}# ... r code ...```].panel[.panel-name[Plot]![](README_files/figure-gfm/panel-chunk-1.png)]]

As an alternative to the “tabs above content” view, you can also usesideways panelsets where the tabs appear beside the tabbed content.

To choose this effect, add the.sideways class to.panelset in yourslides or R Markdown text.

.panelset.sideways[.panel[.panel-name[ui.R]```r# shiny ui code here...```].panel[.panel-name[server.R]```rfunction(input,output,session) {# shiny server code here...}```]]

By default in sideways-mode, the tabs will appear on the left side. Youcan 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]```rfunction(input,output,session) {# shiny server code here...}```]]

Example R Markdown output withpanelset

Panelset works in all R Markdown HTML outputs like HTML reports andblogdown webpages!

Panelset works in the same way asrmarkdown’stabsetfeature, albeit with fewer style options, but the trade-off is that itworks in a wider range of document types. Generally, as long as theoutput is HTML, panelset should work.

Another advantage of panelset is that it enables deeplinking: thecurrently shown tab is encoded in the URL automatically, allowing usersto link to open tabs. Users can also right click on a panel’s tab andselectCopy Link to link directly to a specific panel’s tab, whichwill 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 OneAmet enim aptent molestie vulputate pharetravulputate primis et vivamus semper.##Tab Two###Sub heading oneSit etiam malesuada arcu fusce ullamcorperinterdum proin tincidunt curabitur felis?##Tab ThreeAdipiscing mauris egestas vitae pretium ad dignissim dictumst platea!#Another sectionThis content won't appear in a panel.

In other, less-standard R Markdown HTML formats, you can use pandoc’sfenced divs.

::::: {.panelset}::: {.panel}[First Tab]{.panel-name}Lorem sed non habitasse nulla donec egestas magnaenim posuere fames ante diam!:::::: {.panel}[Second Tab]{.panel-name}Consectetur ligula taciti neque scelerisque gravidaclass pharetra netus lobortis quisque mollis iaculis.::::::::

Alternatively, you can also use raw HTML.

<divclass="panelset"><divclass="panel"><divclass="panel-name">First Tab</div><!-- Panel content --><p>Lorem ipsum, etc, etc</p></div><divclass="panel"><divclass="panel-name">Second Tab</div><!-- Panel content --><p>Lorem ipsum, etc, etc</p></div></div>

To customize the appearance of your panels, you can usestyle_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 thechances that the tabs will work with your slide theme. If you decide tochange your tab colors or to use solid colored tabs, you’ll likely wantto setinactive_opacity = 1 instyle_panelset() (or thecorresponding--panel-tab-inactive-opacity CSS variable).

Behind the scenes,style_panelset_tabs() updates the values ofcustomCSS propertiesthat define the panelset appearance. If you’d rather work with CSS, thedefault values of these properties are shown in the CSS code below. Youcan copy the whole CSS block to your slides and modify the values tocustomize 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;}```

A common use-case forpanelset is to show the code and its output inseparate tabs. For example, you might want to first show the code tocreate a plot in the first tab, with the plot itself in a second tab. Onslides where space is constrained, this approach can be useful.

To help facilitate this process,panelset provides apanelsetchunk option. When set toTRUE, the code is included in a panel tabnamedCode and the output is included in a panel tab namedOutput.Note that you still need to wrap this chunk in a panelset-creatingcontainer.

.panelset[```{r panelset = TRUE}list(  normal = rnorm(10),  uniform = runif(10),  cauchy = rcauchy(10))```]

You can also set thepanelset chunk option to a named vector, wherethesource item is the tab name for the source code and theoutputitem 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 alsowant to set theresults = "hold" chunk option. Currently, knitr usesresults = "markup" as the default, in which case each code expressionand 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 theymust be encapsulated in<div> and</div>

<divclass="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.")```

use_logo() adds a logo to all of your slides. You can make the logo aclickable link and choose where on the slide it is placed. You can alsoset which types of slides will not get the logo by default.

To add a logo to your xaringan presentation, add the following codechunk 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 sizingand positioning. You can also make the logo a link usinglink_url andyou can hide the logo for a particular slide by using thehide_logoslide class.

use_banner() adds a banner to the top or the bottom of your slides.Use banner to add the title of your talk, a link to your materialsonline, or any other text to every slide. Each banner has three columns:left, center, and right. Choose toexclude the banner from particularslides by class.

```{r xaringan-banner, echo=FALSE}xaringanExtra::use_banner(  top_left = "My Awesome Talk Title",  top_right = "Mr. Fancy Pants",  bottom_left = "bit.ly/my-awesome-talk",  exclude = "title-slide")```

Banners are fully customizable and can be styled based on slide class,although the defaults will generally work in most places. Seestyle_banner() for full details!

Bringsremark.search toxaringan slides! Calluse_search() to addsearch to your slidesand to choose your options.

```{r xaringanExtra-search, echo=FALSE}xaringanExtra::use_search(show_icon = TRUE)```

In your slides, pressControl +F to startsearching, or click on the search icon 🔍 if you setshow_icon = TRUE.PressEnter to jump to the next match.

To change the appearance of thesearch box, usestyle_search():

```{r xaringanExtra-search-style, echo=FALSE}xaringanExtra::style_search(match_background = "pink")```

Tachyons is a collection of CSS utility classesthat works beautifully withxaringan presentations and theremarkjs class syntax.

To use tachyons in your slides, add the following code chunk to yourslides’ R Markdown.

```{r xaringan-tachyons, echo=FALSE}xaringanExtra::use_tachyons()```

Tachyons provides small, single-purpose CSS classes that are easilycomposed to achieve larger functionality and styles. In theremarkjscontent classessyntax,you can compose classes by chaining them together. For example, thefollowing markdown produces a box with a washed green background(.bg-washed-green) and a dark green border (.b--dark-green) on allsides (.ba) with line width 2 (.bw2) and border radius (.br3). Thebox 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 provides hundreds of CSS classes that are abbreviated andterse, so it takes some time to learn. In addition to thetachyonsdocumentation, theTachyonsCheatsheet is anexcellent and easy to use reference.

Add a live video of your webcam into your slides (in your own browseronly). Useful when you are presenting via video conference to includeyour video, or when you are recording a class or lecture.

To addwebcam to your xaringan presentation, add the following codechunk to your slides’ R Markdown file.

```{r}xaringanExtra::use_webcam()```

Inside your slides, pressw to turn the webcam on and off, or pressShift +W to move the video to the next corner. You can alsodrag and drop the video within the browser window.

The webcam extension is based on the originalwebcamimplementation by YihuiXie, author ofxaringan.

FreezeFrame starts any gifs on a slide when you turn to that slide. Thishelps alleviate the awkward pause that can happen when you turn to aslide with a gif that has already started and you have to wait until itloops back around. You can also directly click on the gif to stop orstart it. Built usingfreezeframe.js.

To add FreezeFrame to yourxaringan presentation, add the followingcode chunk to your slides' R Markdown file.

```{r xaringanExtra-freezeframe, echo=FALSE}xaringanExtra::use_freezeframe()```

Add a “Copy Code” button for one-click code chunk copying.

To addclipboard to your xaringan presentation or R Markdowndocument, 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 hoveringover a code chunk with thebutton_text argument. Usesuccess_text tospecify the text shown when the copy action works, orerror_text forthe text shown when the copy action fails. If the copy action fails, thetext will still be selected, so the user can still manually pressCtrl+C to copy the code chunk.

These options accept raw HTML strings, so you can achieve an icon-onlyappearance 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())```

clipboard works in xaringan slides, R Markdown documents, blogdownsites, and Shiny apps!

Related projects: For related R packages that provide copy supportviaclipboard.js see

• RLesur/klippy: Copy to Clipboard Buttons for RMarkdown HTMLDocuments
• sbihorel/rclipboard: clipboard.js for R/ShinyApplications

xaringan/remark slides scale at a consistent ratio when the browserwindow is resized. In other words, if the slide ratio is4:3, thenremark scales the slides and positions them in the browser window sothat they maintain the aspect ratio.

In certain situations, like when showing slides in split screen next toanother window like RStudio, this causes the slides to become rathersmall. Alternatively, it’s a great way to be able to adapt your slidesto the aspect ratio of the projector or television screen when you don’tknow the ratio ahead of time.

This extension adds a short cut key —Alt/Option+F — that fits the slides to the screen and ignores the slideratio. (Currently, it only turns on; reload your slides to return tonormal.)

```{r xaringan-fit-screen, echo=FALSE}xaringanExtra::use_fit_screen()```

I’ve collected a few CSS extras that I like to include in my slides,that I’ve bundled up into theuse_extra_styles() function.

```{r xaringan-extra-styles}xaringanExtra::use_extra_styles(  hover_code_line = TRUE,         #<<  mute_unhighlighted_code = TRUE  #<<)```

• hover_code_line adds a little floating triangle next to the hoveredline in a code chunk

• mute_unhighlighted_code modifies the xaringan/remarkjs linehighlighting to mute the lines thataren’t highlighted.

You can also add an animated progress bar usingxaringanExtra::use_progress_bar().

```{r xaringanExtra, echo = FALSE}xaringanExtra::use_progress_bar(color = "#0051BA", location = "top")```

• color can be any CSS color

• location can be"top" or"bottom"

• height can be a valid CSS unit, e.g. 10px or0.25em