Changing the maximum width of R markdown documents

Question

When I create an R Markdown file and knit HTML, the following is present:

<style type="text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

I would like to change the max-width attribute. How would I do that?

Thanks.

score 31 · Accepted Answer · answered Jul 07 '14 at 21:16

31

There's no way to change that number specifically, but you can override it. Create your own style.css file in the same directory as your document, and give it some content:

body .main-container {
max-width: 500px;
}

Then reference that CSS file in your YAML front matter:

---
...
output:
  html_document:
    css: style.css
---

answered Jul 07 '14 at 21:16

Jonathan

8,497
41
35

should I then include the header "css:" in ALL my files? Is there a way to set HTML width for the the subpages of my markdown project globally?... Right now I am including `--- ... output: html_document: css: style.css ---` in all my headers. – Dan May 05 '17 at 15:25
sure, R Markdown output options can be shared across all `.Rmd` files in a directory using [a separate YAML file named `_output.yaml`](http://rmarkdown.rstudio.com/html_document_format.html#shared_options) – Salim B Nov 02 '17 at 15:57
@Jonathan The above syles only work if I add the ` !important` rule to the `max-width` definition as proposed in [this answer](https://stackoverflow.com/a/38373846/7196903). But using that rule [seems bad practice](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception), so is there another way? – Salim B Nov 02 '17 at 16:35

score 15 · Answer 2 · answered Jul 18 '17 at 16:45

15

If you are only making HTML output you can put

<style>
    body .main-container {
        max-width: 500px;
    }
</style>

at the beginning of the .Rmd file I put mine after the front matter.

answered Jul 18 '17 at 16:45

Kyle

401
4
10

Changing the maximum width of R markdown documents

2 Answers2