+ - 0:00:00
Notes for current slide
Notes for next slide

A table of contents for Xaringan

Lucio Cornejo

2022-01-29

1 / 6

Commands defined for the table of contents

  • Toggle the toc's visibility by pressing d in the keyboard.

  • In case that there is blank space to the left of the HTML slide, press e in order to toggle the visibility of the toc, now fully inserted in such blank left space.

  • If you wish to leave no blank space to the right of any of your HTML slides, press r and the slides will shift fully to the right. If you wish to disable this slide shift, simply press f twice in a row.

  • If you wish to increase the width of all your slides, go to any slide in your presentation, hover the mouse over its bottom right corner and click and drag the mouse to alter the slide width.

2 / 6

Using the table of contents

 

If you wish to generate a table of contents like the one from this demo, it's sufficient to include this HTML document in your Xaringan presentation.

In order to achieve that, simply download the HTML file found in the previous link and use the YAML section of your Xaringan's R Markdown file to include the downloaded file.

 

For example:

  

title: "A table of contents for Xaringan"
author: "John Cena"
output:
  xaringan::moon_reader:
    includes:
      after_body: "xaringan-toc-css-and-js.html"
3 / 6

Random text (simply for toc's demo)

Text 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in magna arcu. In ultrices, tellus eget faucibus accumsan, enim metus ornare lorem, et ultricies leo enim sit amet dolor. Ut turpis metus, viverra in vehicula sit amet, feugiat a justo. Quisque in tincidunt arcu, non luctus ligula.

Text 2

Donec ullamcorper est in magna congue volutpat. Suspendisse volutpat, erat in tempus lobortis, lacus lectus vulputate diam, non dictum augue ligula quis urna. Morbi eu viverra erat, a sagittis velit. Proin diam sapien, auctor in sem nec, mattis varius elit. Proin cursus tincidunt dignissim. Praesent sollicitudin aliquet maximus. Sed maximus viverra ante eu luctus.

Text 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in magna arcu. In ultrices, tellus eget faucibus accumsan, enim metus ornare lorem, et ultricies leo enim sit amet dolor. Ut turpis metus, viverra in vehicula sit amet, feugiat a justo. Quisque in tincidunt arcu, non luctus ligula.

Text 3.1

Donec ullamcorper est in magna congue volutpat. Suspendisse volutpat, erat in tempus lobortis, lacus lectus vulputate diam, non dictum augue ligula quis urna. Morbi eu viverra erat, a sagittis velit. Proin diam sapien, auctor in sem nec, mattis varius elit. Proin cursus tincidunt dignissim. Praesent sollicitudin aliquet maximus. Sed maximus viverra ante eu luctus.

Text 3.2

Donec ullamcorper est in magna congue volutpat. Suspendisse volutpat, erat in tempus lobortis, lacus lectus vulputate diam, non dictum augue ligula quis urna. Morbi eu viverra erat, a sagittis velit. Proin diam sapien, auctor in sem nec, mattis varius elit. Proin cursus tincidunt dignissim. Praesent sollicitudin aliquet maximus. Sed maximus viverra ante eu luctus.

Text 3.3

Donec ullamcorper est in magna congue volutpat. Suspendisse volutpat, erat in tempus lobortis, lacus lectus vulputate diam, non dictum augue ligula quis urna. Morbi eu viverra erat, a sagittis velit. Proin diam sapien, auctor in sem nec, mattis varius elit. Proin cursus tincidunt dignissim. Praesent sollicitudin aliquet maximus. Sed maximus viverra ante eu luctus.

4 / 6

Random slide with class no-toc

Some header

lorem ipsum

Another header

lorem ipsum

Even other header

ipsum lorem

5 / 6

Last slide

We'll use the command of the form .no-toc[# header] which Yihui suggested in this Xaringan issue.

Header with no .no-toc[# header]

We will apply .no-toc[...] to the next, and last, header.

Last header

Check this link to see the R Markdown code for this Xaringan presentation.

6 / 6

Thanks for reading this demo :)

Commands defined for the table of contents

  • Toggle the toc's visibility by pressing d in the keyboard.

  • In case that there is blank space to the left of the HTML slide, press e in order to toggle the visibility of the toc, now fully inserted in such blank left space.

  • If you wish to leave no blank space to the right of any of your HTML slides, press r and the slides will shift fully to the right. If you wish to disable this slide shift, simply press f twice in a row.

  • If you wish to increase the width of all your slides, go to any slide in your presentation, hover the mouse over its bottom right corner and click and drag the mouse to alter the slide width.

2 / 6
Paused

Help

Keyboard shortcuts

↑, ←, Pg Up, k Go to previous slide
↓, →, Pg Dn, Space, j Go to next slide
Home Go to first slide
End Go to last slide
Number + Return Go to specific slide
b / m / f Toggle blackout / mirrored / fullscreen mode
c Clone slideshow
p Toggle presenter mode
t Restart the presentation timer
?, h Toggle this help
eShow TOC with height equal to the page's
dShow TOC with half the page's height
rMove all the slides to the right side of the page
Esc Back to slideshow