Search code examples
cssrknitrxaringanremarkjs

xaringan: decrease vertical space between input and output?

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:

enter image description here

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.

enter image description here

Solution

  • 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>