CODEWITHSUNDEEP
cssknitrr-markdownremarkjsxaringan
user1157485
user1157485

Reputation:

Vertical scrollbar for long functions with knitr slides

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

Upvotes: 5

Views: 1537

Answers (3)

Michael Lee
Michael Lee

Reputation: 333

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

Upvotes: 2

Tung
Tung

Reputation: 28391

Have you tried the solution from this answer

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

Upvotes: 2

Marius
Marius

Reputation: 60100

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.

Upvotes: 1

Related Questions