Use introjs in Xaringan Rmarkdown Presentation

91 views Asked by At

I am trying to include an introJS tour into a xaringan presentation but encounter a formatting error (see screenshots below). I suspect it has something to do with css, but I don't where to start.

Additionally, using the arrows (usually to navigate the tour, when the tour is active), also triggers changing the slides using remark.js. Something I can live with, but would be nice to have it properly working...

Interestingly, the preview window of RStudio renders the user tour correctly.

Any ideas how to fix this?

A note on rintrojs: as I am not using shiny as a backend, I cannot use the rintrojs package but include the intro.js and introjs.css scripts directly.

Base Rmarkdown example

---
title: "Tester"
output: html_document
---

<!--- Include IntroJS --->
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script>
<style type="text/css">
  @import url("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css");
</style>

<!--- Create divs and button for starting the tour ---> 
<div id="target" data-step="1" data-intro="This is a tooltip!">
TARGET 1
</div>

<div id="target2" data-step="2" data-intro="This is another tooltip!">
TARGET 2
</div>

<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">START INTROJS</a>

enter image description here

Xaringan Rmarkdown example (broken)

Note that only the yaml-header has changed!

---
title: "Xaringan Tester"
output: xaringan::moon_reader
---

<!--- Include IntroJS --->
<script language="JavaScript" src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/intro.min.js"></script>
<style type="text/css">
  @import url("https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.9.3/introjs.min.css");
</style>

<!--- Create divs and button for starting the tour ---> 
<div id="target" data-step="1" data-intro="This is a tooltip!">
TARGET 1
</div>

<div id="target2" data-step="2" data-intro="This is another tooltip!">
TARGET 2
</div>

<a class="btn btn-large btn-success" href="javascript:void(0);" onclick="javascript:introJs().start();">START INTROJS</a>

enter image description here

0

There are 0 answers