带有 knitr 幻灯片的长功能垂直滚动条

Posted

技术标签:

【中文标题】带有 knitr 幻灯片的长功能垂直滚动条【英文标题】:Vertical scrollbar for long functions with knitr slides 【发布时间】:2018-02-09 23:19:35 【问题描述】:

是否可以使用 knitr 幻灯片制作长功能的垂直滚动条(使用 xaringan 自定义样式)?我根据上一个问题How to make vertical scrollbar appear in RMarkdown code chunks (html view) 尝试了一些选项,但不知道如何仅针对长功能(高度超出框架)执行此操作。任何建议都非常受欢迎。

---
title: "title"
subtitle: "subtitle"
author: "author"
date: "2017"
output:
  xaringan::moon_reader:
    lib_dir: libs
    css: ["default", "style.css"]
    nature:
      highlightStyle: zenburn
      highlightLines: true
      countIncrementalSlides: false
---

```r , echo=FALSE, include=FALSE
library(knitr)
opts_chunk$set(fig.align='center', message=TRUE, error=TRUE, warning=TRUE, tidy=TRUE, comment = "##", echo = TRUE, dev='svg')
options(width=65)
```

```r
fu <- function(x)
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x

```

【问题讨论】:

【参考方案1】:

你试过this answer的解决方案吗

.scrollable-slide 
    height: 800px;
    overflow-y: auto !important;

【讨论】:

类似的东西适用于 xaringan,但前提是我将长代码附在规范中,而不是作为完整幻灯片的类。因此,我新开了一个*** question。【参考方案2】:

我不是 CSS 专家,因此不能保证这是一个可靠的解决方案,但在代码块的样式中添加 max-height 和 overflow-y 似乎效果很好。根据需要调整最大高度,200px 相当短,仅用于演示其工作原理:

<style>
pre.sourceCode 
    max-height: 200px;
    overflow-y: auto;

</style>

我不确定代码块的类名是否会随着不同的输出格式而改变,我使用的是slidy_presentation,因为我没有安装您的渲染器,因此您可能需要检查输出中的类。

【讨论】:

它没有用。也许它必须与输出类有关。我使用的风格是example.css。如何检查输出类?【参考方案3】:

在您的style.css 中,创建一个将 y 溢出定义为滚动和所需 div 高度的类(请参阅此 SO answer 作为参考)

.pre 
  height: 10pc;
  overflow-y: scroll;

然后将该 css 类应用到代码块:

.pre[
```r
fu <- function(x)
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x
  x

```
]

【讨论】:

以上是关于带有 knitr 幻灯片的长功能垂直滚动条的主要内容,如果未能解决你的问题,请参考以下文章

如何使 WPF ListView 项目水平重复,如水平滚动条?

如何使用 knitr 为降价设置本地图像的大小?

iPhone - 在 UIViewController 中处理触摸幻灯片

如何制作这个 Flutter Page 幻灯片指示器?

具有分页动画自动的滚动视图

Flexslider 视口高度在调整大小时无响应