How to embed `asciinema` screencasts in a Xaringan presentation?

[andrie]

I want to embed an [https://asciinema.org/] screencast into a Xaringan document.

The standard way to do this is described at https://asciinema.org/docs/embedding, and essentially consists of a script into your HTML, for example:

<script src="https://asciinema.org/a/14.js" id="asciicast-14" async></script>

This doesn't work in xaringan, since any <script> element gets converted to plain text:

<script src="https://asciinema.org/a/14.js" id="asciicast-14" async></script>

I have tried all sorts of permutations of including https://asciinema.org/a/14.js into Xaringan, e.g. by including in includes: in_header, nature:before_init, nature:after_init, nature:after_body, but none of my incantations work.

Is there some magic incantation to embed asciinema?

[jdb]

Not sure why the following makes it work, but I can see the player when I include the embedding link within the document and in a script after the body:

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, Inc."
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
    includes:
      after_body: asciinema.html
---

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

<script src="https://asciinema.org/a/14.js" id="asciicast-14" async data-autoplay="true"></script>

asciinema.html:

<script src="https://asciinema.org/a/14.js"></script>

Session Info

─ Session info ──────────────────────────────────────────────────────────────────────────────────────────────────────────
 setting  value                       
 version  R version 3.6.0 (2019-04-26)
 os       Ubuntu 16.04.6 LTS          
 system   x86_64, linux-gnu           
 ui       RStudio                     
 language (EN)                        
 collate  C.UTF-8                     
 ctype    C.UTF-8                     
 tz       Etc/UTC                     
 date     2019-10-09                  

─ Packages ──────────────────────────────────────────────────────────────────────────────────────────────────────────────
 ! package     * version  date       lib source                         
   assertthat    0.2.1    2019-03-21 [1] RSPM (R 3.6.0)                 
   cli           1.1.0    2019-03-19 [1] RSPM (R 3.6.0)                 
   crayon        1.3.4    2017-09-16 [1] RSPM (R 3.6.0)                 
   digest        0.6.18   2018-10-10 [1] RSPM (R 3.6.0)                 
   DT            0.6      2019-05-09 [1] RSPM (R 3.6.0)                 
   evaluate      0.13     2019-02-12 [1] RSPM (R 3.6.0)                 
   htmltools     0.3.6    2017-04-28 [1] RSPM (R 3.6.0)                 
   htmlwidgets   1.3      2018-09-30 [1] RSPM (R 3.6.0)                 
   knitr         1.22     2019-03-08 [1] RSPM (R 3.6.0)                 
   magrittr      1.5      2014-11-22 [1] RSPM (R 3.6.0)                 
   Rcpp          1.0.1    2019-03-17 [1] RSPM (R 3.6.0)                 
 R renv          0.4.0-20 <NA>       [?] <NA>                           
   rmarkdown     1.12     2019-03-14 [1] RSPM (R 3.6.0)                 
   rstudioapi    0.10     2019-03-19 [1] RSPM (R 3.6.0)                 
   sessioninfo   1.1.1    2018-11-05 [1] RSPM (R 3.6.0)                 
   withr         2.1.2    2018-03-15 [1] RSPM (R 3.6.0)                 
   xaringan      0.10.1   2019-05-16 [1] Github (yihui/xaringan@153684b)
   xfun          0.7      2019-05-14 [1] RSPM (R 3.6.0)                 
   yaml          2.2.0    2018-07-25 [1] RSPM (R 3.6.0)                 

[1] /cloud/project/renv/library/R-3.6/x86_64-pc-linux-gnu
[2] /opt/R/3.6.0/lib/R/library

[andrie]

Thank you! That seems to work, at least partially.

What I find:

• The asciinema player embeds if I view the presentation in a browser tab, but not inside the RStudio viewer
• The player bleeds off the bottom of the page, i.e. it's 612px high, but the HTML page is only displays ~400px. I haven't yet found a way to pass the viewport size to the player.

[andrie]

It turns out that reading the manuals help.

I was able to specify the number of rows, but the docs says to prepend data- to the rows argument, like this:

<script src="https://asciinema.org/a/14.js" id="asciicast-14" data-rows=25></script>

Now the player fits on the screen , but sadly it still doesn't show up in the RStudio viewer pane .

[jdb]

On RStudio Cloud, I'm able to see the player in the Viewer pane so it might be possible with a more recent version of RStudio/xaringan package:

[andrie]

I now have a working solution, using the asciicast package, available from GitHub - r-lib/asciicast: Turn R scripts into terminal screencasts.

```{r, echo = FALSE}
tf <- tempfile(fileext = ".cast")
download.file("https://asciinema.org/a/168512.cast?dl=1", destfile = tf, 
               mode = "wb")

library(asciicast)
asciicast::asciinema_player(
  read_cast(tf), rows = 45
)
```

The only limitation of the asciicast package is that you can only render version 2 cast files, but since v2 is the current version of asciinema, all of your new screen recordings should work fine.

Using this solution, you simply load the asciicast package, and you don't need any JavaScript in either the body or the headers. It's clean and simple.

Here is a screen shot: