xaringan: decrease vertical space between input and output?

Question

I cannot figure out how to change the CSS in the xaringan package if I want to decrease the vertical space between code input and output boxes. here is the simple change inside the default xaringan template:

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, Inc."
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

???

Image credit: [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Sharingan_triple.svg)

---
class: center, middle

# xaringan

### /ʃaː.'riŋ.ɡan/

---
class: inverse, center, middle

# Get Started

---

---

# R code

```{r}
1+1

I would like to shrink the space between in put and output:

Here is what I see in my safari course explorer. I guess i just want to shrink the orange area. pre? I tried changing that, but messed up the CSS. thanks for any hints.

score 5 · Accepted Answer · edited Aug 20 '19 at 15:15

5

You can change css code locally in the file by inserting html <style></style> tags. The part that controls the default size of the pre elements for xaringan is defined as follows:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
    margin-top: 1em;
    margin-right: 0px;
    margin-bottom: 1em;
    margin-left: 0px;
}

(at least that is the default code I see if I use the default markdown xaringan template from RStudio).

It is the margin-bottom and margin-top elements that you need to change. Thus if you add the following right after the yaml in your .Rmd file then you should be able to modify the relevant parts.

<style>
pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
    margin-top: 0em;
    margin-right: 0px;
    margin-bottom: 0em;
    margin-left: 0px;
}
</style>

edited Aug 20 '19 at 15:15

Florian Oswald

5,054
5
30
38

answered Aug 19 '19 at 19:56

ekstroem

5,957
3
22
48

1

awesome! thanks! this works almost perfectly for me. one slight issue is that the first slide (i.e. where I put the `style` tags) does no longer work (i.e. the one with the background-image thing). I had to put the `style` thing on a first, totally empty slide. is there a better solution available? Also, I presume I could place that into a separate `.css` file, right? – Florian Oswald Aug 20 '19 at 14:54
1

yes works great with the seperate css file. thanks so much! – Florian Oswald Aug 20 '19 at 15:11

xaringan: decrease vertical space between input and output?

1 Answers1