html - 带有 RStudio 和 xaringan 的垂直可滚动代码

Question

我目前正在为 准备 html 幻灯片R 建模研讨会，我使用了很棒的 xaringan 的包R .它基于 remark.js .与 ioslides 和 slidy 相比，它确实更符合我的期望。我非常兴奋!我错过的一项功能是可滚动的“长幻灯片”。在这里，我当然将“幻灯片”范式转向幻灯片和普通网页之间的混合，但我发现这在解释复杂的内容和代码方面具有教学吸引力。这种风格适用于 滑动 ，我还在 中找到了一些如何启用可滚动代码的提示xaringan .
在这里，我使用以下 CSS(在 related post at SO 中找到):

.scrollable {
  height: 80%;
  overflow-y: auto;
} 

然后在 RMarkdown 代码块中，例如:

.scrollable[
  
```{r}
foo <- function() {
  cat("nothing\n")
}

foo()
foo()
foo()
foo()
foo()
foo()
foo()
foo()
foo()
foo()

## some comments ...
# ...
foo()
```

]

长幻灯片
这里我的意思是可以向下滚动的网页，但仍然嵌入在幻灯片中。

代码示例
带有可滚动代码的示例 在幻灯片内 喜欢这里:

代码:https://github.com/dynamic-R/hacking-limnology/blob/main/docs/test.Rmd

演示:https://dynamic-r.github.io/hacking-limnology/test.html#3

它部分有效，但我还不完全满意:

我更喜欢真正的“长幻灯片”而不是可滚动的文本。

而不是用 .scrollable[] 封闭部分我更喜欢完整幻灯片的类(class)

它仅适用于 Chrome、Edge(和 RStudio 的 Infinite Moon Reader)，但不适用于 Firefox。 编辑:绝对 heigt适用于 Firefox(感谢@Waldi 的评论)

CSS 方法取自 a related post at SO ，其中还包含指向进一步方法的链接(部分使用额外的 JavaScript)，但我无法让它们运行。
问题
任何想法，如何:

定义一个 xaringan 带有可滚动内容的幻灯片类或

将幻灯片定义为真正的“长幻灯片”，即长 html 页面

其中“具有可滚动内容的幻灯片类”或“长幻灯片”类可以定义如下:

---
class: scrollable-slide

如同:

---
layout: false
class: inverse, middle, center

发现于 https://github.com/yihui/xaringan/wiki/Slide-layouts

Answer 1

remark.js没有考虑到可滚动的幻灯片，这意味着如果没有添加到 remark.js 的主要功能，就无法实现滚动。或打破某些 remark.js特征。
如果您愿意破坏某些功能，我能想到的破解可滚动幻灯片的最简单方法是更改​​ y-overflow的.remark-slide-scaler类(class)。我们所要做的就是添加以下 CSS:

.remark-slide-scaler {
    overflow-y: auto;
}

要包含此 CSS，您可以将其写入文件，例如 scrollable.css , 并将其包含在 xaringan 中像这样配置 block :

title: "Scrollable slides"
output:
  xaringan::moon_reader:
    css: ["default", "scrollable.css"]

此 CSS 将为所有内容比幻灯片本身长的幻灯片添加滚动条。
打破的东西
滚动幻灯片
默认 remark.js允许您从一张幻灯片滚动到下一张或上一张。但是，当我们在幻灯片上有滚动条时，我们希望禁用此行为。
解决这个问题的正确方法是在 remark.js 中编写实现一些功能。在适当的时候禁用和启用默认滚动行为。
一种简单的方法是简单地禁用幻灯片滚动。我们可以通过添加 scroll: false 来做到这一点到navigation阻止我们的nature我们的 xaringan 的 block 配置:

title: "Scrollable slides"
output:
  xaringan::moon_reader:
    css: ["default", "scrollable.css"]
    nature:
      navigation:
# Disable scrolling through slides to
# allow scrolling in slides
        scroll: false

页码
页码位于幻灯片框架的底部，但粘在幻灯片内容的底部。这意味着当您向下滚动可滚动幻灯片时，页码也会向上滚动。

要正确解决此问题，我们必须更改 remark.js 的方式。呈现内容。一个常见的解决方案是 this ，这涉及将主要内容放在与页脚不同的容器中。此页脚将包含页码。
一个简单的解决方案是隐藏页码。我们可以通过将以下内容添加到我们的 scrollable.css 中来做到这一点:

.remark-slide-number {
    display: none;
}

克隆remark.js有一个称为“克隆”的功能，它可以让您打开多个幻灯片实例，但都同步到同一页面。因此，当一个实例转到下一张幻灯片时，所有其他幻灯片也会这样做。不幸的是，这对于我们的滚动幻灯片并没有按预期工作。 remark.js无法注册页面向下滚动的距离，因此它无法将其传达给其克隆。这意味着在一个实例上您可能一直向下滚动，但其他实例仍将停留在内容的顶部。一个简单的解决方案是干脆不使用此功能。
打印(未测试)
我没有对此进行测试，但我可以想象滚动幻灯片会破坏打印。内容将被截断，或者长页面将被打印在其整个长度上，可能会与页面上的其他内容重叠。这里一个简单的解决方案是根本不打印幻灯片。
可能有更多功能，例如打印，可能会或可能不会因滚动幻灯片中的黑客攻击而破坏。
结论
总而言之，如果您能够使用有限的功能，您可以通过首先创建文件 scrollable.css 来破解滚动幻灯片。 ，包含:

.remark-slide-scaler {
    overflow-y: auto;
}

.remark-slide-number {
    display: none;
}

其次包括scrollable.css以及 scroll: false在您的 xaringan配置。我在下面包含了一个示例幻灯片来说明。

---
title: "Scrollable slides"
output:
  xaringan::moon_reader:
    css: ["default", "scrollable.css"]
    nature:
      navigation:
# Disable scrolling through slides to
# allow scrolling in slides
        scroll: false
---
class: center

# First a normal short slide

Some content here
---
class: scrollable-slide

# A

# long

# slide

# that

# requires

# scrolling

# on

# my

# system
---
# End slide

其他选项
如果您没有那么多需要长的幻灯片，您可以选择制作讲义。如果你用 rmarkdown 做这个，它将使讲义的源文件与幻灯片的源文件非常相似，允许导出为不同的格式(如 html)，并允许您使用所有 remark.js的特点。
另一种选择，如果你真的需要这个并且可以很好地说明为什么这对其他人也有用，那就是在 remark.js 上提出功能请求。 GitHub page用于可滚动幻灯片。