在Xaringan Rmarkdown演示文稿中使用Introjs

如何解决在Xaringan Rmarkdown演示文稿中使用Introjs

我正在尝试在xaringan演示文稿中加入introJS浏览，但是遇到格式错误（请参见下面的屏幕截图）。我怀疑这与css有关，但我没有从哪里开始。

此外，使用箭头（通常在游览处于活动状态时导航游览）也会触发使用remark.js更改幻灯片。我可以接受的东西，但是能够正常工作会很高兴...

有趣的是，RStudio的预览窗口可以正确呈现用户浏览。

有什么办法解决这个问题吗？

关于rintrojs的注释：由于我没有使用shiny作为后端，因此我无法使用rintrojs软件包，但要包含intro.js和{{ 3}}脚本。

Base Rmarkdown示例

---
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>

introjs.css

Xaringan Rmarkdown示例（已损坏）

请注意，只有yaml标头已更改！

---
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>