使用RStudio和xaringan垂直滚动代码

Question

我目前正在为R建模研讨会准备html幻灯片，为此我使用了R的xaringan软件包。它是基于remark.js的。与碘油片和滑头相比，它更符合我的期望。我太兴奋了！我错过的一个功能是可滚动的“长幻灯片”。在这里，我当然离开了“幻灯片”范式，将幻灯片和普通网页混合在一起，但我发现这在解释复杂的内容和代码方面具有很强的教学吸引力。这种风格适用于slidy，我还发现了一些在xaringan中启用可滚动代码的提示。

在这里，我使用以下CSS (在有关职位中找到)：

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

然后在RMarkdown代码块中，如下所示：

.scrollable[
  
```{r}

foo <- function() {

“禁止酷刑公约”(“无”)

}

foo()

foo()

foo()

foo()

foo()

foo()

foo()

foo()

foo()

foo()

一些评论..。

..。

foo()

]

长幻灯片

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

​

​

代码示例

在幻灯片中使用可滚动代码的示例如下：

• 代码：https://github.com/dynamic-R/hacking-limnology/blob/main/docs/test.Rmd
• 演示：https://dynamic-r.github.io/hacking-limnology/test.html#3

它部分起作用，但我还没有完全满意：

• 我更喜欢真实的“长幻灯片”而不是可滚动的文本。
• 与其随附.scrollable[]部件，我更喜欢使用完整幻灯片的类。
• 它只适用于Chrome、Edge (以及RStudio的无限月亮阅读器)，而不适用于火狐。编辑：绝对heigt与火狐合作(感谢@Waldi的评论)

CSS方法是从与之相关的职位中获取的，它还包含指向进一步方法的链接(部分通过附加的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功能，就不可能实现滚动。

如果您愿意破坏某些特性，我认为在可滚动幻灯片中黑入的最简单的方法是修改.remark-slide-scaler类的.remark-slide-scaler。我们所要做的就是添加以下CSS：

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

要包含这个CSS，您可以将它写入一个文件，比如scrollable.css，并将它包含在xaringan配置块中，如下所示：

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

此CSS将添加一个滚动条到所有幻灯片，其中的内容比幻灯片本身长。

打破的东西

滚动幻灯片

默认情况下，remark.js允许您从一张幻灯片滚动到下一张或上一张幻灯片。但是，当幻灯片上有滚动条时，我们希望禁用此行为。

解决这一问题的正确方法是在remark.js中编写实现某些功能，在适当的时候禁用并启用默认的滚动行为。

一个简单的方法是简单地禁用滚动幻灯片。我们可以通过将scroll: false添加到navigation配置的nature块中来做到这一点：

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呈现内容的方式。一个常见的解决方案是类似于这的解决方案，它涉及将主内容从页脚分离到一个单独的容器中。此页脚将包含页码。

一个简单的解决方案是隐藏页码。我们可以通过在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和scroll: false。我已经包括了下面的一个示例幻灯片来说明。

---
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页面上为可滚动的幻灯片提出一个特性请求。