Search code examples
rr-markdownxaringanremarkjs

Use a specific slide number for slideNumberFormat in xaringan


In a xaringan presentation, the slideNumberFormat argument is often set to %current% / %total%. It is possible to use a specific slide number in this argument?

For instance, if I have a "final" slide like this:

---
name: mylastslide
# Thanks

with appendix slides behind, I want to display slide numbers like %current% / %mylastslide% with %mylastslide% the number of my slide called mylastslide.

Thanks.

[Edit after @user2554330 suggestion]

For this code, with an incremental slide,

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, PBC"
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
---

background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

<script>
var slideshow = remark.create({slideNumberFormat : function (current, total) {
  return 'Slide ' + current + ' of ' + (this.getSlideByName("mylastslide").getSlideIndex() + 1); },
  highlightStyle: "github",
  highlightLines: true,
  countIncrementalSlides: false});
</script>

Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Sharingan_triple.svg)

---
class: center, middle

# xaringan

---

hello 

--

world

--

thanks

--

really

--

byebye

---
name: mylastslide

# Final slide

Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):

```{r eval=FALSE, tidy=FALSE}
devtools::install_github("yihui/xaringan")
```

---

# Appendix

The last slide (ie appendix) is numbered as Slide 6 of 9 (and not Slide 6 of 5) and 9 is the url index of mylastslide. (I used + 1 in the slideNumberFormat function because indexes start at 0.)

Thanks.


Solution

  • You could certainly set the format to a fixed value for the last slide, e.g. %current% / 34. But you can also set it to a Javascript function. (Edited to add:) The tricky part is that you need to include all the options that would normally appear in the nature argument as well. So you want something like

    <script>
    var slideshow = remark.create({slideNumberFormat : function (current, total) {
      return 'Slide ' + current + ' of ' + this.getSlideByName("mylastslide").getSlideIndex(); },
      highlightStyle: "github",
      highlightLines: true,
      countIncrementalSlides: false});
    </script>
    

    You name a slide by putting the text

    name: mylastslide
    

    at the bottom of the slide after --- marks. So here's a complete example, based on the first few slides of the xaringan template:

    ---
    title: "Presentation Ninja"
    subtitle: "⚔<br/>with xaringan"
    author: "Yihui Xie"
    institute: "RStudio, PBC"
    date: "2016/12/12 (updated: `r Sys.Date()`)"
    output:
      xaringan::moon_reader:
        lib_dir: libs
    ---
    
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)
    
    ```{r setup, include=FALSE}
    options(htmltools.dir.version = FALSE)
    ```
    
    <script>
    var slideshow = remark.create({slideNumberFormat : function (current, total) {
      return 'Slide ' + current + ' of ' + this.getSlideByName("mylastslide").getSlideIndex(); },
      highlightStyle: "github",
      highlightLines: true,
      countIncrementalSlides: false});
    </script>
    
    ???
    
    Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Sharingan_triple.svg)
    
    ---
    class: center, middle
    
    # xaringan
    
    ### /ʃaː.'riŋ.ɡan/
    
    ---
    class: inverse, center, middle
    
    # Get Started
    
    ---
    name: mylastslide
    
    # Hello World
    
    Install the **xaringan** package from [Github](https://github.com/yihui/xaringan):
    
    ```{r eval=FALSE, tidy=FALSE}
    devtools::install_github("yihui/xaringan")
    ```
    

    This has 5 slides, numbered "1 of 4" to "5 of 4".

    Edited to add: As discussed in the comments, this doesn't handle incremental slides properly: getSlideIndex() counts incremental slides separately. We want to use getSlideNumber(), which stays the same on all of them when we use the option countIncrementalSlides: false. However, the online version of remark-latest.min.js doesn't have getSlideNumber() in it, you need to ask for remark-0.15.0.min.js.

    You do this with the following YAML:

          xaringan::moon_reader:
            lib_dir: libs
            chakra: https://remarkjs.com/downloads/remark-0.15.0.min.js
    

    After this the code below worked fine:

    <script>
    var slideshow = remark.create({slideNumberFormat : function (current, total) {
      return 'Slide ' + current + ' of ' + this.getSlideByName("mylastslide").getSlideNumber(); },
      highlightStyle: "github",
      highlightLines: true,
      countIncrementalSlides: false});
    </script>