使用 RStudio 和 xaringan 垂直滚动代码

Question

我目前正在为R建模研讨会准备 html 幻灯片，为此我使用了很棒的 R xaringan包。它基于remark.js。与ioslides和slidy相比，它确实更符合我的期望。我非常兴奋！我错过的一项功能是可滚动的“长幻灯片”。在这里，我当然将“幻灯片”范例保留为幻灯片和普通网页之间的混合，但我发现这对于解释复杂的内容和代码在说教上很有吸引力。这种风格与slidy配合得很好，我还发现了一些如何在xaringan中启用可滚动代码的提示。

在这里，我使用以下 CSS（在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[]更喜欢完整幻灯片的课程
• 它仅适用于 Chrome、Edge（以及 RStudio 的 Infinite Moon Reader），但不适用于 Firefox。编辑：绝对heigt适用于 Firefox（感谢@Waldi 的评论）

CSS 方法取自SO 的相关帖子，其中还包含进一步方法的链接（部分带有额外的 JavaScript），但我无法让它们运行。

问题

任何想法，如何：

• 定义一个具有可滚动内容的xaringan幻灯片类或
• 将幻灯片定义为真正的“长幻灯片”，即长 html 页面

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

---
class: scrollable-slide

如同：

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

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

Answer 1

remark.jsremark.js没有考虑到可滚动幻灯片，这意味着如果不添加主要功能或破坏某些功能，就不可能实现滚动remark.js。

如果您愿意破坏某些功能，我能想到的破解可滚动幻灯片的最简单方法是更改​​类y-overflow的.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中的块来做到这一点：naturexaringan

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在您的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 页面上提出可滚动幻灯片的功能请求。