Vertical scrollbar for long functions with knitr slides

Question

Is it possible to make vertical scrollbar for long functions with knitr slides (using xaringan custom style)? I was trying some options based on this previous question How to make vertical scrollbar appear in RMarkdown code chunks (html view) but no idea how to do it only for long functions (which height goes out of the frame). Any advice is more than welcome.

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

score 2 · Answer 1 · answered Oct 18 '17 at 15:34

2

Have you tried the solution from this answer

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

answered Oct 18 '17 at 15:34

Tung

26,371
7
91
115

Something similar works well with xaringan, but only if I enclose the long code with the specification, not as a class for complete slides. Therefore, I opened a new [Stackoverflow question](https://stackoverflow.com/questions/67750561/vertically-scrollable-code-with-rstudio-and-xaringan). – tpetzoldt May 29 '21 at 11:31

score 2 · Answer 2 · answered May 14 '18 at 16:18

In your style.css, create a class that define y overflow as scroll and the desired height of the div (see this SO answer as a reference)

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

Then apply that css class to the code block:

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

score 1 · Answer 3 · answered Sep 01 '17 at 00:44

I'm not an expert with CSS so can't guarantee that this is a robust solution, but adding max-height and overflow-y to the styling of code blocks seems to work well. Adjust the max-height as necessary, 200px is fairly short and only used to demonstrate how it works:

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

I'm not sure if the class name for code blocks changes with different output formats, I was using slidy_presentation as I didn't have your renderer installed so you may have to check the class on your output.

It did not work. Maybe it has to be with the class on the output. The style I am using is [example.css](https://github.com/yihui/xaringan/blob/master/inst/rmarkdown/templates/xaringan/resources/example.css). How can I check the output class? — , Sep 01 '17 at 17:02

Vertical scrollbar for long functions with knitr slides

3 Answers3

Linked