xaringan 幻灯片上的水平可滚动输出

Posted 2023-03-08

【中文标题】xaringan 幻灯片上的水平可滚动输出

【英文标题】：Horizontally scrollable output on xaringan slides

【发布时间】：2018-11-27 20:50:38

【问题描述】：

我想在水平滚动框中显示 R 命令的输出。代表：

library(ggplot2movies)
head(movies)
#                      title year length budget rating votes   r1   r2  r3   r4   r5   r6   r7   r8   r9  r10 mpaa Action Animation Comedy Drama Documentary Romance Short
# 1                        $ 1971    121     NA    6.4   348  4.5  4.5 4.5  4.5 14.5 24.5 24.5 14.5  4.5  4.5           0         0      1     1           0       0     0
# 2        $1000 a Touchdown 1939     71     NA    6.0    20  0.0 14.5 4.5 24.5 14.5 14.5 14.5  4.5  4.5 14.5           0         0      1     0           0       0     0
# 3   $21 a Day Once a Month 1941      7     NA    8.2     5  0.0  0.0 0.0  0.0  0.0 24.5  0.0 44.5 24.5 24.5           0         1      0     0           0       0     1
# 4                  $40,000 1996     70     NA    8.2     6 14.5  0.0 0.0  0.0  0.0  0.0  0.0  0.0 34.5 45.5           0         0      1     0           0       0     0
# 5 $50,000 Climax Show, The 1975     71     NA    3.4    17 24.5  4.5 0.0 14.5 14.5  4.5  0.0  0.0  0.0 24.5           0         0      0     0           0       0     0
# 6                    $pent 2000     91     NA    4.3    45  4.5  4.5 4.5 14.5 14.5 14.5  4.5  4.5 14.5 14.5           0         0      0     1           0       0     0

如何使输出在 xaringan 幻灯片上水平滚动？

【问题讨论】：

作为记录，这也是在github.com/yihui/xaringan/issues/147 交叉发布的（我建议 Stack Overflow）。

【参考方案1】：

@Yihui Xie 已经在 Github 上提供了很多答案。我只是在这里把它变成一个工作示例。需要注意的是：

1) 可以将 css 指定为 Rmarkdown 中的代码块，或者可以按照以下指南编写自己的 css 文件：https://github.com/yihui/xaringan/wiki。我假设这是一次性的，所以为了简单起见，我将 css 包含在 Rmd 文件中。

2) 为pre 元素设置属性后，还需要将width 选项或R 设置为较大的值，否则head 将为您包装输出。

---
title: "Horizontal scroll for wide output"
output:
  xaringan::moon_reader:
    css: ["default"]
    nature:
      highlightLines: true
---

```r setup, include=FALSE
knitr::opts_chunk$set(echo = TRUE)
```

```css, echo=FALSE
pre 
  background: #FFBB33;
  max-width: 100%;
  overflow-x: scroll;

```

```r
library(ggplot2movies)
op <- options("width"=250) # large number to trick head, otherwise see next slide
head(movies)
options(op) # set options back to default
```

---

```r
head(movies) # head with default width, note text gets wrapped. Though you can still scroll horizontally, as an effect of setting `pre`
```

【讨论】：

这可行，但是当我尝试实际向右（或向左）滚动时，我最终会在幻灯片之间移动。有没有办法覆盖 L/R 滚动输入以在块内捕获它而不将其传递给幻灯片？

@MattPollock，我在幻灯片之间移动而不是滚动时遇到了同样的问题。在 Firefox（与 RStudio 查看器相反）中，如果我使用触摸板在可滚动输出上进行两指点击，则会出现滚动条（右键菜单也是如此）。不完美，但功能齐全。理想情况下，滚动条总是可见的。

看起来滚动条始终可用可以在 CSS 中设置（如上），但也取决于操作系统/浏览器设置。

试试overflow-x: auto;