Xaringan

https://github.com/yihui/xaringan
Admin
An R package for creating HTML5 slideshows with remark.js through R Markdown, featuring various...
Tokens:9,178
Snippets:143
Trust Score:9.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install slidex Package

Source: https://github.com/yihui/xaringan/wiki/Importing-from-Microsoft-PowerPoint

Install the slidex package from GitHub. This is a prerequisite for using the conversion functionality.

```r
devtools::install_github("datalorax/slidex")
```

--------------------------------

### Install PhantomJS for webshot

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Installs PhantomJS, a headless WebKit scriptable with JavaScript. This is a prerequisite for the webshot package to function correctly.

```r
install_phantomjs()
```

--------------------------------

### Setup BibOptions and Read .bib File

Source: https://github.com/yihui/xaringan/wiki/Bibliography-and-citations

Configure citation and bibliography styles and load references from a .bib file. This should be run at the beginning of your slides.

```r
library(RefManageR)
BibOptions(check.entries = FALSE,
           bib.style = "authoryear",
           cite.style = "alphabetic",
           style = "markdown",
           hyperlink = FALSE,
           dashed = FALSE)
myBib <- ReadBib("./myBib.bib", check = FALSE)
```

--------------------------------

### Install webshot Package

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Installs the webshot package, which can be used to render xaringan HTML slides into PDF. This method has been tested on Windows, macOS, and Linux.

```r
# install.packages("webshot")
library(webshot)
```

--------------------------------

### Install xaringanBuilder Package

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Installs the xaringanBuilder package from GitHub. This package provides tools for building PDF files from Rmd or HTML slides.

```r
# install.packages("remotes")
remotes::install_github("jhelvy/xaringanBuilder")

library(xaringanBuilder)
```

--------------------------------

### Install xaringan Package

Source: https://github.com/yihui/xaringan/blob/master/README.md

Use the remotes package to install the xaringan package from GitHub. This is the recommended method for obtaining the latest version.

```r
remotes::install_github('yihui/xaringan')
```

--------------------------------

### Install pagedown and xaringan Packages

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Installs the necessary R packages for PDF conversion. Ensure you have versions of pagedown >= 0.2 and xaringan >= 0.9.

```r
install.packages(c("pagedown", "xaringan"))
# make sure you have pagedown >= 0.2 and xaringan >= 0.9; if not, run
# remotes::install_github(c('rstudio/pagedown', 'yihui/xaringan'))
```

--------------------------------

### Custom Slide Layout Initialization

Source: https://github.com/yihui/xaringan/wiki/Slide-layouts

Initialize a custom slide layout with a background image. Use `layout: true` to start a new layout section.

```css
layout: true

background-image: url(http://oxinova.net/wp-content/uploads/2016/12/professional-powerpoint-templates-i2wpubdd.jpg)
background-size: cover

---

# name of first slide
```

--------------------------------

### Enable Colored Terminal Output

Source: https://github.com/yihui/xaringan/wiki/Colored-terminal-output

Add this option to your `knitr` setup chunk to enable colored terminal output. Ensure the `fansi` package is installed.

```r
options(crayon.enabled = TRUE)
```

--------------------------------

### Automated PDF Conversion with decktape.js

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Uses the decktape.js command-line tool to convert HTML slides to PDF. This method is suitable for automated workflows. Ensure decktape is installed via npm.

```r
system("`npm bin`/decktape remark slides.html slides.pdf") # decktape v2.5.0
```

--------------------------------

### Importing Fonts in CSS for Netlify

Source: https://github.com/yihui/xaringan/wiki/Deploy-Slides-Online

Ensure font imports are at the top of your CSS file when hosting on Netlify. This example shows the correct order for @import rules.

```css
@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700);

body { font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', Palatino, 'Microsoft YaHei', 'Songti SC', serif; }
...
```

--------------------------------

### Set Slide Number Format in YAML

Source: https://github.com/yihui/xaringan/wiki/Slide-number

Configure the format of slide numbers displayed in presentations. This example shows how to set the format using the `slideNumberFormat` option within the `nature` section of the YAML header.

```yaml
# ...
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      # Examples
      slideNumberFormat: "%current%"
      slideNumberFormat: "Slide %current% of %total%"
      slideNumberFormat: "%current%/%total%"
```

--------------------------------

### Print Specific Range of Bibliography

Source: https://github.com/yihui/xaringan/wiki/Bibliography-and-citations

Print a subset of the bibliography by specifying the start and end entry numbers. Useful for managing long bibliographies across multiple slides.

```r
PrintBibliography(bib, start = 1, end = 7)
```

--------------------------------

### Print HTML Slides to PDF with pagedown::chrome_print

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Uses the chrome_print function from the pagedown package to convert an Rmd or HTML file to PDF. Requires Google Chrome or Chromium to be installed.

```r
pagedown::chrome_print("path/to/your/slides.Rmd")

# or just pass the HTML output file path to chrome_print()
pagedown::chrome_print("path/to/your/slides.html")
```

--------------------------------

### Build Complex or Partial Slides to PDF with xaringanBuilder

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Builds PDF from slides, with options to handle 'complex' slides (e.g., panelsets, HTML widgets) and 'partial' slides (incremental slides). Set complex_slides = TRUE and partial_slides = TRUE for advanced rendering.

```r
build_pdf("slides.Rmd", complex_slides = TRUE, partial_slides = TRUE)
build_pdf("slides.html", complex_slides = TRUE, partial_slides = TRUE)
```

--------------------------------

### Convert PPTX with Theme

Source: https://github.com/yihui/xaringan/wiki/Importing-from-Microsoft-PowerPoint

Convert a PowerPoint presentation to xaringan slides, specifying a particular theme for the output. This allows for customization of the presentation's appearance.

```r
convert_pptx(path = pptx, 
             author = "Daniel Anderson",
             theme = "metropolis")
```

--------------------------------

### YAML Header with Multiple Custom CSS Files

Source: https://github.com/yihui/xaringan/wiki/Prerequisites

Use square brackets to specify multiple CSS files for more granular control over styling.

```YAML
output:
  xaringan::moon_reader:
    css: ["my-theme.css", "my-font.css"]

```

--------------------------------

### Convert Local HTML to PDF with webshot

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Converts a local HTML file to PDF using the webshot function. The file path must be specified using the 'file://' protocol.

```r
file_name <- paste0("file://", normalizePath("my_xaringan.html"))
webshot(file_name, "mypdf.pdf")
```

--------------------------------

### Convert PDF using xaringan's decktape Wrapper

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Leverages the built-in wrapper function in the xaringan package to call decktape for PDF conversion. This simplifies the process if using recent xaringan versions.

```r
xaringan::decktape()
```

--------------------------------

### List Available xaringan Themes

Source: https://github.com/yihui/xaringan/wiki/Themes

Execute this R code to retrieve a list of all CSS theme names currently available in the xaringan package.

```r
names(xaringan:::list_css())
```

--------------------------------

### Specify CSS Themes in xaringan Output

Source: https://github.com/yihui/xaringan/wiki/Themes

Use the `css` option in the xaringan output configuration to specify theme files. Always include 'default' first to retain base styles.

```yaml
output:
  xaringan::moon_reader:
    css: [default, metropolis, metropolis-fonts]
```

--------------------------------

### Include animate.css CDN in Xaringan Output

Source: https://github.com/yihui/xaringan/wiki/Slide-transitions

Add the animate.css CDN link to the `css` argument within the `xaringan::moon_reader` output configuration to enable transitions.

```yaml
output:
  xaringan::moon_reader:
    lib_dir: libs
    css:
      - default
      - default-fonts 
      - "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
```

--------------------------------

### Build PDF from Rmd or HTML with xaringanBuilder

Source: https://github.com/yihui/xaringan/wiki/Export-Slides-to-PDF

Converts Rmd or HTML slides to PDF using the build_pdf function from xaringanBuilder. This is a straightforward method for basic slide conversion.

```r
build_pdf("slides.Rmd")
build_pdf("slides.html")
```

--------------------------------

### Custom Code Font with Fallback

Source: https://github.com/yihui/xaringan/wiki/Changing-fonts

Imports 'Ubuntu Mono' from Google Fonts and sets it as the primary font for code, with predefined fonts as fallbacks.

```css
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
```

--------------------------------

### YAML Header Extending Default CSS

Source: https://github.com/yihui/xaringan/wiki/Prerequisites

Extend the default CSS by listing 'default' first, followed by your custom CSS file.

```YAML
output:
  xaringan::moon_reader:
    css: ["default", "my-theme.css"]

```

--------------------------------

### Convert PPTX to Xaringan

Source: https://github.com/yihui/xaringan/wiki/Importing-from-Microsoft-PowerPoint

Convert a PowerPoint presentation to xaringan slides using the `convert_pptx` function. Specify the path to the PPTX file and optionally the author's name.

```r
library(slidex)

# Get path to example PowerPoint presentation
pptx <- system.file("examples", "slidedemo.pptx", package = "slidex")

# Convert the PPTX
convert_pptx(path = pptx, author = "Daniel Anderson")
```

--------------------------------

### Header Font Configuration

Source: https://github.com/yihui/xaringan/wiki/Changing-fonts

Specifies the font family and weight for H1, H2, and H3 headers, importing 'Yanone Kaffeesatz' from Google Fonts.

```css
h1, h2, h3 {
  font-family: 'Yanone Kaffeesatz';
  font-weight: normal;
}
```

--------------------------------

### Print Bibliography

Source: https://github.com/yihui/xaringan/wiki/Bibliography-and-citations

Generate and display the bibliography from loaded references. This function searches the .Rmd document for citations and includes them in the output.

```r
PrintBibliography(myBib)
```

--------------------------------

### YAML Header with Custom CSS

Source: https://github.com/yihui/xaringan/wiki/Prerequisites

Specify a custom CSS file in the YAML header to enable slide modifications. Ensure the path is relative if the CSS file is not in the same directory.

```YAML
---
title: "Presentation Ninja"
subtitle: "with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    css: "my-theme.css"
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
---

```

--------------------------------

### R Markdown YAML Header with Custom CSS

Source: https://github.com/yihui/xaringan/wiki/Footer-and-header-lines

Configures the Xaringan presentation to use a custom CSS file named 'footer-header.css'. It also includes HTML content for the header and footer within the presentation's layout.

```yaml
---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
date: "2016/12/12"
output:
  xaringan::moon_reader:
    css: ["footer-header.css", "default"]
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

layout: true
  
<div class="my-header"></div>

<div class="my-footer"><span>xaringan power    
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
yolo</span></div> 

---

# new slide
```

--------------------------------

### YAML Header for Progress Bar

Source: https://github.com/yihui/xaringan/wiki/Progressbar

Add this code to your YAML header under 'nature' to enable the progress bar functionality. It defines the HTML structure for the progress bar.

```yaml
nature:
  slideNumberFormat: |
    <div class="progress-bar-container">
      <div class="progress-bar" style="width: calc(%current% / %total% * 100%);">
      </div>
    </div>
```

--------------------------------

### Enable Word Wrap for All Pre Elements

Source: https://github.com/yihui/xaringan/wiki/Word-wrapping-of-code-output

Use this CSS rule to enable word wrapping for all `<pre>` elements. This is a general solution to prevent code overflow on slides.

```css
pre {
  white-space: pre-wrap;
}
```

--------------------------------

### Add Background to Inline Code

Source: https://github.com/yihui/xaringan/wiki/Inline-code-highlighting

Apply this CSS to your presentation's CSS file to give inline code a grey background, rounded corners, and padding. Adjust the 'background' property to choose your preferred shade of grey.

```css
.remark-inline-code{
  /* background: #F5F5F5; /* lighter */
  background: #e7e8e2; /* darker */
  border-radius: 3px;
  padding: 4px;
}
```

--------------------------------

### Default Body Font

Source: https://github.com/yihui/xaringan/wiki/Changing-fonts

Sets the default font family for the main body text of the presentation.

```css
body { font-family: 'Droid Serif', 'Palatino Linotype', 'Book Antiqua', 'Palatino', 'Microsoft YaHei', 'Songti SC', serif; }
```

--------------------------------

### Custom CSS for Header and Footer

Source: https://github.com/yihui/xaringan/wiki/Footer-and-header-lines

Defines CSS classes for a custom header and footer. The header has a gradient background and is fixed at the top, while the footer has a dark background and is positioned at the bottom.

```css
div.my-header {
    background-color: #F77A00;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffb76b), color-stop(0%,#ffa73d), color-stop(0%,#ffffff), color-stop(10%,#ffffff), color-stop(25%,#F77A00), color-stop(100%,#F77A00));
    position: fixed;
    top: 0px;
    left: 0px;
    height: 30px;
    width: 100%;
    text-align: left;
}

div.my-footer {
    background-color: #272822;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    width: 100%;
}
div.my-footer span {
    font-size: 10pt;
    color: #F7F8FA;
    position: absolute;
    left: 15px;
    bottom: 2px;
}
```

--------------------------------

### Enable Word Wrap and Add Indentation for Remark Code Lines

Source: https://github.com/yihui/xaringan/wiki/Word-wrapping-of-code-output

This CSS rule targets elements with the `remark-code-line` class, enabling word wrap and adding indentation. This provides more control over code line formatting.

```css
.remark-code-line {
	white-space: pre-wrap;
	padding-left: 1.85em;
	text-indent: -1.85em;
}
```

--------------------------------

### Apply Slide Transitions in Xaringan

Source: https://github.com/yihui/xaringan/wiki/Slide-transitions

Assign the 'animated' class along with a specific animate.css transition class (e.g., 'slideInRight', 'bounceInDown') to a slide's class attribute to control its transition.

```markdown
---
class: center, middle, animated, slideInRight

# xaringan

### /ʃæ.'riŋ.ɡæn/

---
```

```markdown
---
class: inverse, center, middle, animated, bounceInDown

# Get Started
```

--------------------------------

### Custom CSS for Progress Bar

Source: https://github.com/yihui/xaringan/wiki/Progressbar

Include this CSS in your custom CSS file or within style tags in your Xaringan content. It styles the progress bar container and the bar itself.

```css
.remark-slide-number {
  position: inherit;
}

.remark-slide-number .progress-bar-container {
  position: absolute;
  bottom: 0;
  height: 4px;
  display: block;
  left: 0;
  right: 0;
}

.remark-slide-number .progress-bar {
  height: 100%;
  background-color: red;
}
```

--------------------------------

### Default Code Font

Source: https://github.com/yihui/xaringan/wiki/Changing-fonts

Sets the default font family for code blocks and inline code.

```css
.remark-code, .remark-inline-code { font-family: 'Source Code Pro', 'Lucida Console', Monaco, monospace; }
```

--------------------------------

### Break Slide with Layout Reset

Source: https://github.com/yihui/xaringan/wiki/Slide-layouts

Insert a break slide by setting `layout: false` and then reinitialize the layout for subsequent slides. The `class: inverse, middle, center` can be used for styling the break slide.

```css
---
layout: false
class: inverse, middle, center

# Header of empty slide


---

layout: true

background-image: url(http://oxinova.net/wp-content/uploads/2016/12/professional-powerpoint-templates-i2wpubdd.jpg)
background-size: cover
---

# Slide with layout again
```

--------------------------------

### Define Custom Font Size CSS Classes

Source: https://github.com/yihui/xaringan/wiki/Font-Size

Define .small and .large CSS classes in your theme's CSS file to control font sizes relative to the default. These classes can be applied directly within your presentation content.

```css
.large { font-size: 130% }
.small { font-size: 70% }
```

--------------------------------

### Set Title Slide Background Image

Source: https://github.com/yihui/xaringan/wiki/Background-image

Insert this CSS into your `my-theme.css` file to set a background image for the title slide. `background-size: cover;` ensures the image scales to fit the slide.

```css
.title-slide {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/39/Naruto_Shiki_Fujin.svg);
  background-size: cover;
}
```

--------------------------------

### Style Title Slide Headers

Source: https://github.com/yihui/xaringan/wiki/Background-image

Customize the color of `h1` headers and the color and line-spacing for `h2` and `h3` headers on the title slide. Ensure this block comes after `.inverse` in your CSS.

```css
.title-slide h1 {
  color: #F7F8FA;
}
.title-slide h2, .title-slide h3 {
  color: #e7e8e2; 
  line-height: 1.5em;
}
```

--------------------------------

### Change Link Color

Source: https://github.com/yihui/xaringan/wiki/Link-color

Use this CSS snippet to set a custom color for all links and code within links. The default color is rgb(249, 38, 114). Setting text-decoration to none removes the default grey background from links.

```css
a, a > code {
  color: #FF1B70; /*default: rgb(249, 38, 114); || sets color of links */
  text-decoration: none; /* turns off background coloring of links */
}
```

--------------------------------

### Reduce Slide Margins

Source: https://github.com/yihui/xaringan/wiki/Slide-Margin

Use this CSS to significantly decrease the padding around the main content area of your slides. Apply these styles to your presentation's CSS file.

```css
.remark-slide-content {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
```

--------------------------------

### Customize Slide Number Appearance with CSS

Source: https://github.com/yihui/xaringan/wiki/Slide-number

Modify the default styling of slide numbers by adjusting font size, margins, color, and opacity. This CSS targets the `.remark-slide-number` class.

```css
.remark-slide-number {
  font-size: 10pt;
  margin-bottom: -11.6px;
  margin-right: 10px;
  color: #FFFFFF; /* white */
  opacity: 1; /* default: 0.5 */
}
```

--------------------------------

### Set First Title Margin

Source: https://github.com/yihui/xaringan/wiki/Slide-Margin

This CSS rule targets the first h1 element within a slide's content to remove its top margin. Add this to your CSS file to control the spacing of titles.

```css
.remark-slide-content > h1:first-of-type {
  margin-top: 0px;
}
```

--------------------------------

### Adjust Title Slide Header Margins

Source: https://github.com/yihui/xaringan/wiki/Title-slide

Modify the vertical space around headers on the title slide by adjusting margins. Use negative margins to move elements upwards.

```css
.title-slide h1 {
  text-shadow: none;
  color: #F7F8FA;
  margin-top: -70px;
}
```

--------------------------------

### Hide Slide Number on Title Slide

Source: https://github.com/yihui/xaringan/wiki/Slide-number-removal

Use this CSS rule to prevent slide numbers from appearing on the title slide. Apply this to your remark.js presentation's CSS.

```css
.title-slide .remark-slide-number {
  display: none;
}
```
Tokens:
Raw