Slide number

Slide number appearance

If you are not satisfied with the default placement and size of the slide number, there are several ways to change it. By default, slide numbers have an opacity of 0.5. If you want to overlay the slide number on a coloured footer bar, you may want to turn this off.

Changing the position is done using margin controls like margin-bottom or margin-right. You can also draw a box with a custom background color around the slide number. See section inline-code customisation for an example.

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

Slide number format

The format of the slide number can be changed by adding slideNumberFormat to the parameters passed to remark.js via nature in xaringan::moon_reader, either in the YAML (as below) or in the call to xaringan::moon_reader(..., nature = list(slideNumberFormat = "%current%")). By default, remark.js provides two keywords -- %current% and %total% -- that can be used in the string, and can also handle a custom Javascript function. For more information, see the remark.js configuration options documentation.

# ...
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      # Examples
      slideNumberFormat: "%current%"                  # 12
      slideNumberFormat: "Slide %current% of %total%" # Slide 12 of 42
      slideNumberFormat: "%current%/%total%"           # 12/42 
---