Missing horizontal scroll bar in R Markdown HTML code chunks and output

Question

How can I make my knitted .Rmd document not wrap code when producing an HTML document? Whenever I knit my file I get output like the following:

You can see that the first line containing a cbind call is wrapped. This was produced by the following Rmd code. Basically, I'd like to see the resultant HTML file look like it does here on StackOverflow (i.e. with a horizontal scroll bar).

---
title: "Title"
author: "Author"
date: "March 25, 2016"
output: html_document
---

```{r}
myveryveryveryveryverylongvariablenameanditsdataaaaaaaaaaaaaaaaaaaaaaaaaaa <- cbind(iris, iris, iris, iris, iris, iris, iris)
head(myveryveryveryveryverylongvariablenameanditsdataaaaaaaaaaaaaaaaaaaaaaaaaaa )
```

Then separately, how can I do this for the text output on the second line? I've tried options(width=...) but this only seems to jarble up the output more. I'd like to it also look just as it does here on StackOverflow (no wrapping, with horizontal scroll bar):

  Sepal.Length Sepal.Width Petal.Length Petal.Width Species Sepal.Length Sepal.Width Petal.Length Petal.Width Species Sepal.Length Sepal.Width Petal.Length Petal.Width Species Sepal.Length Sepal.Width Petal.Length Petal.Width
1          5.1         3.5          1.4         0.2  setosa          5.1         3.5          1.4         0.2  setosa          5.1         3.5          1.4         0.2  setosa          5.1         3.5          1.4         0.2
2          4.9         3.0          1.4         0.2  setosa          4.9         3.0          1.4         0.2  setosa          4.9         3.0          1.4         0.2  setosa          4.9         3.0          1.4         0.2
3          4.7         3.2          1.3         0.2  setosa          4.7         3.2          1.3         0.2  setosa          4.7         3.2          1.3         0.2  setosa          4.7         3.2          1.3         0.2
4          4.6         3.1          1.5         0.2  setosa          4.6         3.1          1.5         0.2  setosa          4.6         3.1          1.5         0.2  setosa          4.6         3.1          1.5         0.2
5          5.0         3.6          1.4         0.2  setosa          5.0         3.6          1.4         0.2  setosa          5.0         3.6          1.4         0.2  setosa          5.0         3.6          1.4         0.2
6          5.4         3.9          1.7         0.4  setosa          5.4         3.9          1.7         0.4  setosa          5.4         3.9          1.7         0.4  setosa          5.4         3.9          1.7         0.4

@jenesaisquoi, your solution to the first part of my problem via CSS is perfect--I would expect this to be the default style of HTML outputs. As for the second, your suggestion of using the `DT` package works, but only for `data.table`s and `data.frame`s. Do you know of a generic solution? What if I wanted to avoid the text wrapping of the output of `summary(myveryveryveryveryverylongvariablenameanditsdataaaaaaaaaaaaaaaaaaaaaaaaaaa)`? — Jeff Keller, Mar 26 '16 at 06:02
I think we're close--that gets me the horizontal scroll bar for chunk outputs but the output text all runs together now, and doesn't seem to maintain the spacing and line breaks that it has in the R console. — Jeff Keller, Mar 26 '16 at 15:54

score 10 · Accepted Answer · edited May 23 '17 at 11:46

10

With some help from folks in the comments, I was able to piece together a solution. There are two steps:

Include a custom style sheet in the .Rmd YAML header:

css: report_styles.css

Which contains these styles:

pre, code {white-space:pre !important; overflow-x:scroll !important}

This makes it so that echoed code chunks will not wrap and that they have a horizontal scroll bar. It will also make is so that chunk outputs will not wrap further when the browser window is resized.
Now, to get the chunk output to not wrap initially, we need to set options(width=a-big-number) as per this question.

edited May 23 '17 at 11:46

Community

1
1

answered Mar 26 '16 at 16:35

Jeff Keller

771
1
7
15

2

It may be personal preference, but I think this behavior would be good to include as the default. At the very least, I think (1) should be directly accessible via chunk/global chunk options (if it isn't already, somehow). – Jeff Keller Mar 26 '16 at 16:37
3

Good answer! However, setting the `scroll` option adds a scroll bar to all code chunks. I ended up using `overflow-x: auto;` because it adds a scroll bar only when needed. – SimonG Mar 09 '17 at 09:13
1

could you actually share a link to your report_styles.css file? – user2955884 Aug 01 '18 at 10:08

score 6 · Answer 2 · answered Nov 20 '19 at 22:38

This is basically @JeffKeller's answer but instead of having a separate CSS file and fiddling around in the YAML header you can just write your CSS inside your .Rmd file as a code snippet! For example,

```{css, echo=FALSE}
pre, code {white-space:pre !important; overflow-x:auto}
```

I tend to do this at about the same early point where I do other bits of setup e.g.

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

(Perhaps this is more of a comment but I can't really format it as such. Judging from the comments on the other answer though, I think some people might find this useful.)

score 2 · Answer 3 · answered Oct 27 '20 at 17:51

2

Another alternative to both answers - write the css after your YAML header using html:

<style>
pre {
  white-space: pre-wrap;
  background: #F5F5F5;
  max-width: 100%;
  overflow-x: auto;
}

</style>

answered Oct 27 '20 at 17:51

GISHuman

1,026
1
8
27

Missing horizontal scroll bar in R Markdown HTML code chunks and output

3 Answers3