Xaringan presentations with blogdown

How to integrate Xaringan in blogdown?

I am following in this short post the detailed description by Tim Mastny in his blog entry Embed Slides in Your Blog. Please read his article — especially the second half of it, where he is explaining the installation procedure.

Refer to an external slideshow

knitr::include_url('https://timmastny.rbind.io/slides/first_presentation')

Refer to an internal slideshow

knitr::include_url('/slide/xaringan-demo.html', height = "505px")

Summary

Both examples above are the same as in Tim’s article.

Two observations:

  1. There is no need to load the Xaringan package with library(xaringan). At the moment, I do not understand why this is not necessary.
  2. In the second example, the gray left and right margin have disappeared. The parameter height = "505px" does this. To tweak this, I had to experiment with the optimal pixel value. (Maybe there is a better way to tweak this parameter with the valid value, e.g., taking the value from the CSS.)

The height parameter solves one of the problems mentioned by Tim:

I’m also investigating to see if I can trim the iframe, so I only see the slides and not the gray bars on the side.

How to present slides in full-screen view?

Here I wanted to address his second issue:

I’d like to be able to use a relative reference to the slideshow’s HTML file in the static/ directory, but I think knitr::include_url() requires a live URL. I’ll have to do more research.

Summary

This is the solution Tim was looking for. I tried several approaches in vain. Then I remembered that there is a demo blogdown-static website by Yihui Xie. There I found the solution!

Summary and conclusion

This third approach solves the second question mentioned by Tim. And this is an excellent solution: With a simple relative link in Markdown can everyone present (Xaringan) slideshows without an internet connection in full-screen view.

Sure there would have always been the possibility to go via the operating system to the file on the hard disk directly. But this is not very elegant and would complicate to present an integrated presentation via browser with other (multimedia) elements. One reason out of 11 why Xihui Yui hotly favors remark.js is the feature that you can press the back button in the browser, and you will go back to the page from which you visited the slides, instead of reading the slides in the reverse order again.

The next thing on my agenda is to learn how to apply Xaringan for everyday use. I have to read and try out:

Then I will transfer — as a first real live application — my slideshows written with reveal.js stored at my abandoned site at https://notes.peter-baumgartner.net/slide/ to this new site here.


To inspect the full code of this post follow this link to my GitHub repo.

Edit this page

Peter Baumgartner
Peter Baumgartner
Retired Professor of Technology Enhanced Learning (TEL)

My research interests include eLearning, educational technology, educational design, open science and data science education.


Related