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:

There is no need to load the Xaringan package with library(xaringan). At the moment, I do not understand why this is not necessary.
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.

My first try: Using Markdown image links

My first try was: ![](/slide/xaringan-demo.html/#5)

It generates a kind of thumbnail. Maybe this is theme dependent. I once tried it out in another theme and got other sizes, e.g., over the whole width of the text column. Presumably, this has to be done in one of the CSS files of the corresponding template.

A kind of a thumbnail was not the result I was looking for, but it could become handy anyway. For instance, as a reference in an article. With the slide number behind the URL, one can reference easy every slide frame directly.

My second try: Using Markdown with absolute links

The second try is a link in standard Markdown to the file. It opens up the full-screen presentation. The code:

The second try is a [link in standard markdown](https://portfolio.peter-baumgartner.net/slide/xaringan-demo#1) to the file.

This is not ideal one always needs an internet connection for the presentation.

My third try: Using Markdown with relative links

The third try is a relative link in Markdown to the file. It opens up the full-screen presentation. The code:

The third try is a [relative link in Markdown](/slide/xaringan-demo.html) to the file.

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:

the example slides (Xaringan and remark),
the readme file at the remark GitHub site and
the documentation in the remark wiki.

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.

This work by Peter Baumgartner is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Permissions beyond the scope of this license may be available at http://notes.peter-baumgartner.net/contact. Powered by the docdock theme for Hugo.
Privacy | Disclaimer