Introduction to the

We have already given a detailed introduction to Xaringan: R Communication | making slides with the Xaringan package, and a small extension: R communication | setting up the Xaringan theme. Today I’ll introduce another package related to Xaringan slide information: xaringanExtra.

This package covers a number of extensions to the wheel eye, as shown below:

  • Present presentations in parallel ⭐️

  • Edit presentations online ⭐️

  • Share slide style

  • The slides are broadcast to the audience in real time

  • Doodle on the presentation slide ⭐️

  • There is an audio prompt ⭐️ when the slide is switched

  • Add slide switch animation ⭐️

  • Add the tabbed panel to the slide ⭐️

  • Add the global logo ⭐️ to the slide show

  • Add a search box

  • Use the Tachyons CSS utility kit

  • Add webcams for real-time video ⭐️

  • Use clipboard to add one-click code copy

  • The GIF starts with the slide

  • Resize the slide to fill the browser window ⭐️

  • Add additional CSS styles

Here, xiaobian will not introduce all the extended functions. Mainly to some of the usual I use more functions to introduce (above marked ⭐️). If you’re interested in some of the other features that haven’t been mentioned. You can see the official website.

Introductory tutorial

The installation

You can install the current version of xaringanExtra from GitHub.

# install.packages("devtools")
devtools::install_github("gadenbuie/xaringanExtra")
Copy the code

Now that the package is installed, let’s create an Xaringan template. Xaringanthemer is what YOU want to create from the Xaringanthemer. See: R Communication | set xaringan theme) :

If you’re watching my tutorials for the first time or if you’re just a blob, check out some of my previous tutorials. Especially if you want to write round eye slides, the first two issues must be learned first, or directly see this tweet will be more meng. Of course, the video corresponding to the tweet will also be updated on my b website.

1. Show your presentation side by side

How to use: Add the following code block to the slideshow R Markdown file, and then re-render the RMD file.

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

The location is optional, suggest to put behind yamL.

After rendering, press the O key (first letter of Overview) in the demo interface (default Rstudio bottom right corner) to get the following interface. Press the O button again to return to the default form.

This feature is similar to the slide viewing mode in PPT. The yellow box shows where you are currently, and you can switch directly to the location you want with the mouse. This feature is very handy and easy to use, as long as you add the previous code.

2. Edit your presentation online

This feature is invincible! You can write directly on a slide show and update it in real time. Can edit […] The implementation.

How to use it: You simply add the following code to the RMD document you create:

​```{r xaringan-editable, echo=FALSE}
xaringanExtra::use_editable(expires = 1)
​```
Copy the code

Use.can-edit[] to make the slide component editable.

## .can-edit[You can edit this slide title]
Copy the code

The editable fields of the.can-Edit class are reset each time the slide is reloaded into the browser. If you want to store edits and persist them between browser sessions, provide a.key-

class for each editable field. Such as:

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

For more complex HTML elements, it is best to make only a portion of the text editable, for example

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

Or use placeholder text.

## A few of my favorite things

.can-edit.key-likes[
- thing one
- thing two
]
Copy the code

Here is the official demo GIF:

It is very suitable for teaching and can increase the interaction with students and audience. PPT does not have this function (may not understand PPT).

3. Doodle your presentation slides

How to use it: Simply add the following code to the RMD file and recompile to get this effect.

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

Click the pencil icon or press the S key to draw. Press S or start drawing mode to switch to the doodle toolbox. You can also use an eraser to remove lines or click the “Trash” button to remove all graffiti on the current slide.

Note that as you change the slides, the drawings will remain on each slide. You cannot change slides in drawing mode. In fact, you can use the ← and → keys to undo or redo your drawing.

If you want to save your slides with your doodles, your best bet is to print your presentation from your browser. The corresponding GIF operation is shown below:

! [the graffiti] (/ Users/liangliangzhuang/Documents/wechat / 2021.05.18 xaringanExtra/material/graffiti. GIF)

4. Sound prompt when switching between slides

How to use it: Simply add the following code to the RMD file and recompile to get this effect.

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

The corresponding GIF operation is given below. GIF can not give sound, watch my b station video demonstration)

5. Add slideshow animation

How to use: Add the following code to the RMD file

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

Then add the Animated class and the desired animation to the corresponding slide. Here’s an example code:

** Note: ** Exit animation only applies when exiting the slide.

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

At this point, the slide will slide in from the right. If you want to use the same transformation for all your slides, use: use_animate_all().

The code for this time is as follows (recommended to the front of the body)

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

Here is a GIF of all the slides switched to the left:

! [switch] (/ Users/liangliangzhuang/Documents/wechat / 2021.05.18 xaringanExtra/material/switch. GIF)

6. Add the TAB panel to the slide

How to use: Add the following code to the RMD file

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

Then, create a.panelset […] containing several.panel[] . Each.panel [] should have.panel-name [] and what you want to write, for example:

.panel[.panel-name[NAME]...content...]
Copy the code

Here are the examples used in the presentation slides.

{R panel-chunk, FIG. Align ='center',out.width="60%"}# ... r code ...library(ggplot2)(g <- ggplot(mpg) + aes(hwy, cty, color = class) + geom_point())```].panel[.panel-name[Plot]<center><img src="https://octodex.github.com/images/labtocat.png" height="300" /></center>]]Copy the code

The specific GIF is as follows:

To customize the panel’s appearance, you can use style_panelset_tabs() call directly in the R block of the slide. Add the following code under the preceding code block,

​```{r echo=FALSE}xaringanExtra::style_panelset_tabs(foreground = "honeydew", background = "seagreen")​```
Copy the code

At this point, the color of the code block changes.

7. Add a global logo to the slide

How to use: Add the following code to the RMD file

​```{r xaringan-logo, echo=FALSE}xaringanExtra::use_logo(  image_url = "https://gitee.com/zhuang_liang_liang0825/other/raw/master/%E6%B8%A9%E5%B7%9E%E5%A4%A7%E5%AD%A6logo.png")​```
Copy the code

At this point, all the slides have the corresponding logo added in the upper right corner! You can use hide_LOGO to hide the logo for a particular slide if you want to hide the logo for certain slides. Specific examples are as follows (xiaobian uses the Alma mater logo) :

Add webcams for live video

How to use it: Add the following code to the RMD file and re-render it.

​```{r xaringan-webcam, include = FALSE}xaringanExtra::use_webcam()​```
Copy the code

Then hit the W key (remember to open it in your browser!). You’ll get the following interface (the tweet was written a little late, I’m sorry, I can’t be bothered to type. Xiaobian listless ing, feel useful please xiaobian cup of coffee!

Of course, the camera position you can manually arbitrary drag!

This is really great when you’re presenting via video conferencing, including your video, or when you’re recording a class or lecture!

8. Resize the slide to fill the browser window

How to use it: Add the following code to the RMD file and re-render it.

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

Use the Alt/Option + F shortcut to fit the slide onto the screen and ignore the slide scale (reload the slide to get back to normal). The specific GIF is as follows:

Xiaobian has something to say

  • Other ways to expand, xiaobian will not do too much explanation, interested can be found through the end of the article references to the corresponding website.

  • After learning the techniques above, I believe that you can write the b-pane slides differently than before. Enjoy!

  • Xiaobian actually has other requirements: how to add video in the eyes of the writing wheel? How to add background music? I haven’t searched for a method yet, and I don’t know if there is one.