使用 RStudio 和 xaringan 垂直滚动代码 [英] Vertically scrollable code with RStudio and xaringan

问题描述

我目前正在为 R 建模研讨会准备 html 幻灯片，为此我使用了用于 R 的很棒的 xaringan 包.它基于

演示:

要正确解决此问题，我们必须更改 remark.js 呈现内容的方式.一个常见的解决方案是类似于 this，它涉及将主要内容放在与页脚分开的容器.此页脚将包含页码.

一个简单的解决方案是隐藏页码.我们可以通过在 scrollable.css 中添加以下内容来实现:

.remark-slide-number {显示:无；}

克隆

remark.js 有一个叫做克隆"的特性.这让您可以打开多个幻灯片实例，但都同步到同一页面.因此，当一个实例转到下一张幻灯片时，所有其他幻灯片也会这样做.不幸的是，对于我们的滚动幻灯片，这并不像预期的那样工作.remark.js 无法记录页面向下滚动的距离，因此它无法将其传达给其克隆.这意味着在一个实例上，您可能一直向下滚动，但其他实例仍将停留在内容的顶部.一个简单的解决方案就是不使用此功能.

打印(未测试)

我还没有测试过这个，但我可以想象滚动幻灯片会打印出乱七八糟的东西.内容将被截断，或者长页面将按其整个长度打印，可能与页面上的其他内容重叠.一个简单的解决方案是不打印幻灯片.

可能有更多功能，例如打印，可能会或可能不会因滚动幻灯片中的黑客攻击而中断.

结论

总而言之，如果您能够忍受有限的功能，您可以通过首先创建一个文件 scrollable.css 来破解滚动幻灯片，其中包含:

.remark-slide-scaler {溢出-y:自动；}.remark-slide-number {显示:无；}

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

---标题:可滚动幻灯片"输出:xaringan::moon_reader:css:[默认"，scrollable.css"]自然:导航:# 禁止滚动幻灯片到# 允许在幻灯片中滚动滚动:假---班级:中心# 首先是一张普通的短幻灯片这里的一些内容---类:可滚动幻灯片# 一种# 长# 滑动# 那# 需要# 滚动# 上# 我的# 系统---# 结束幻灯片

其他选项

如果您没有那么多需要很长的幻灯片，您可以选择制作讲义.如果你用 rmarkdown 来做这个，它会使讲义的源文件与幻灯片的源文件非常相似，允许导出为不同的格式(如 html)，并允许你使用remark.js 的所有功能.

另一种选择，如果您真的需要这个并且可以很好地说明为什么这对其他人也有用，那么将在 remark.js GitHub 页面，用于可滚动幻灯片.

I am currently preparing html slides for an R modelling workshop, for which I use the awesome xaringan package for R. It is based on remark.js. Compared to ioslides and slidy, it does much better suit my expectations. I am absolutely excited! One feature that I missed, are scrollable "long slides". Here I leave of course the "slides" paradigm towards a mix between slides and ordinary web pages, but I find this didactically attractive to explain complex content and code. This style worked well with slidy, and I found also some hints how to enable scrollable code in xaringan.

Here I use the following CSS (found in a related post at SO):

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

and then in an RMarkdown code chunk something like:

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

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

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

]

Long slides

Here I mean web-pages that can be scrolled down, but still stay embeded in a slide show.

Code Example

An example with scrollable code within a slide is fond here:

• Code: https://github.com/dynamic-R/hacking-limnology/blob/main/docs/test.Rmd
• Demo: https://dynamic-r.github.io/hacking-limnology/test.html#3

It works partly, but I am not yet completely satisfied:

• I would prefer true "long slides" instead of scrollable text.
• Instead of enclosing parts with .scrollable[] I would prefer a class for complete slides
• It works only with Chrome, Edge (and the Infinite Moon Reader of RStudio), but not with Firefox. Edit: absolute heigt works with Firefox (Thanks to comment of @Waldi)

The CSS approach was taken from a related post at SO, that contains also links to further approaches (partly with additional JavaScript), but I was not able to get them running.

The Question

Any ideas, how to:

• define a xaringan slide class with scrollable content or
• to define slides as true "long slides", i.e. long html pages

where "slide class with scrollable content" or a "long-slide" class may be defined like:

---
class: scrollable-slide

similar to:

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

found in https://github.com/yihui/xaringan/wiki/Slide-layouts

解决方案

remark.js was not made with scrollable slides in mind, which means that it is not possible to implement scrolling without a major feature addition to remark.js or breaking certain remark.js features.

If you are willing to break some features, the easiest way I can think of to hack in scrollable slides is by altering the y-overflow of the .remark-slide-scaler class. All we have to do is add the following CSS:

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

To include this CSS you can write it to a file, say scrollable.css, and include it in the xaringan config block like so:

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

This CSS will add a scroll bar to all slides which have content that is longer than the slide itself.

Things that break

Scrolling through slides

By default remark.js allows you to scroll from one slide to the next or previous one. However, when we have a scrollbar on a slide, we would like to heve this behaviour disabled.

The proper way to solve this is to write implement some functionality in remark.js that disables and enables the default scrolling behaviour at appropriate times.

An easy way is to simply disable scrolling through slides. We can do so by adding scroll: false to the navigation block in our nature block of our xaringan config:

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

Page numbers

Page numbers are positioned at the bottom of the slide frame, but stick to the bottom of the slide content. This means that when you scroll down your scrollable slide, the page number scrolls up as well.

To fix this properly, we would have to change how remark.js renders the content. A common solution is something like this, which involves having the main content in a separate container from the footer. This footer would contain the page numbers.

An easy solution is hiding the page numbers. We can do so by adding the following to our scrollable.css:

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

Cloning

remark.js has a feature called "cloning" which lets you have several instances of the slides opened, but all synced to the same page. So when one instance goes to the next slide, all other slides do so as well. This unfortunately does not work as expected for our scrolling slides. remark.js is not able to register how far the page has been scrolled down, so it cannot communicate that to its clones. This means that on one instance you may have scrolled down all the way, but the other instances will still be stuck at the top of the content. An easy solution is to simply not use this feature.

Printing (not tested)

I have not tested this, but I can imagine the scrolling slide mucking up printing. Either the content will get truncated, or the long page will get printed in its entire length, possibly overlapping other things on the page. An easy solution here is to simply not print the slides.

There may be more features, like printing, that may or may not break by hacking in scrolling slides.

Conclusion

To summarise, if you are able to live with limited functionality, you can hack in scrolling slides by first creating a file scrollable.css, containing:

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

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

And secondly include scrollable.css as well as scroll: false in your xaringan config. I have included a sample slideset below to illustrate.

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

Other options

If you don't have that many slides that need to be long, you could opt to make a handout. If you make this with rmarkdown, it would make the source files of the handouts very similar to the source file of the slides, would allow for exporting to different formats (like html), and would let you use all of remark.js's features.

Another option, if you really need this and can make a good case why this is useful to others as well, would be to make a feature request at the remark.js GitHub page for scrollable slides.

这篇关于使用 RStudio 和 xaringan 垂直滚动代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！