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

Bolger

Answer 1

Have you tried the solution from this answer

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

Neddie

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. – Sarette

Answer 2

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

Adrea

Answer 3

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.

Avi

It did not work. Maybe it has to be with the class on the output. The style I am using is example.css. How can I check the output class? – Bolger