如何在RMarkdown代码块（html视图）中显示垂直滚动条

Question

我找到了很多关于如何在R Markdown HTML输出中添加水平滚动条的示例，包括这个具体的示例（此处）。 然而，没有描述如何添加垂直滚动条的内容。 再次借鉴链接示例的思路，但把一个宽矩阵转换为“高”矩阵，我想在我的ioslide演示文稿中竖向滚动矩阵。

---
title: "Vertical needs"
author: "Hyped"
date: "December 13, 2016"
output: ioslides_presentation
---

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

## Where's my vertical scrollbar?

```{r}
x <- matrix(nrow = 40, ncol = 4, data = 1)
x
```

上述矩阵的输出延伸到幻灯片的底部，然后消失。没有滚动条。我尝试通过修改添加到.Rmd文件（或放置在自定义CSS中）的CSS样式代码来解决缺少水平滚动条的答案 来自

<style>
pre code, pre, code {
  white-space: pre !important;
  overflow-x: scroll !important;
  word-break: keep-all !important;
  word-wrap: initial !important;
}
</style>

to (将 overflow-x 替换为 overflow-y)：

<style>
pre code, pre, code {
  white-space: pre !important;
  overflow-y: scroll !important;
  word-break: keep-all !important;
  word-wrap: initial !important;
}
</style>

但是没有运气。有人能提供缺失的拼图吗？

- Hyped7777

Answer 1

问题似乎是您没有指定代码块的高度。请尝试使用以下代码替代：

<style>
pre {
  white-space: pre !important;
  overflow-y: scroll !important;
  height: 50vh !important;
}
</style>

（关于vh单位的信息，请查看此处）

- Martin Schmelzer

---

这个可行！谢谢！不过，我对解决方案还有一个额外的问题...其他水平滚动条的解决方案似乎将pre标签与code标签结合起来。然而，即使在R代码块中添加echo=TRUE以在输出中查看代码文本，我在HTML源代码中也没有看到任何代码标签。相反，我看到了pre.lang-r，我猜我可以设置它来区分代码文本本身和输出之间的样式。你能对此发表评论吗？ - Hyped7777

有趣的是我也找不到它们。我不确定代码标签在最近的版本中是否被移除了。无论如何，您当然可以使用 pre { ... } 和 pre.lang-r { ... } 来设置不同的样式（或者 pre:not(lang-r) 和 pre.lang-r { ... }）。 - Martin Schmelzer

当使用Kable时，它无法在输出表上工作。 - Rio

当然不行。您需要将CSS标签从“pre”更改为包装kable表格的标签。 - Martin Schmelzer

Answer 2

在@Martin Schmelzer的解决方案上进行补充，我发现如果echo = TRUE或者如果文档的其他部分输出不是很大，可能会出现问题。要解决这个问题，只需要更改：

Original Answer翻译成"最初的回答"

height: 50vh !important;

to

max-height: 50vh !important;

- Adam Elder