xaringan：减少输入和输出之间的垂直空间？

Posted 2023-03-08

【中文标题】xaringan：减少输入和输出之间的垂直空间？

【英文标题】：xaringan: decrease vertical space between input and output?

【发布时间】：2019-12-24 15:45:13

【问题描述】：

如果我想减少代码输入和输出框之间的垂直空间，我不知道如何更改 xaringan 包中的 CSS。这是默认 xaringan 模板中的简单更改：

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

我想缩小输入和输出之间的空间：

这是我在我的 Safari 课程浏览器中看到的内容。我想我只是想缩小橙色区域。 pre?我尝试改变它，但搞砸了 CSS。感谢您的任何提示。

【参考方案1】：

您可以通过插入 html <style></style> 标签在文件中本地更改 css 代码。控制 xaringan 的pre 元素默认大小的部分定义如下：

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

（如果我使用default markdown xaringan template from RStudio，至少这是我看到的默认代码）。

您需要更改的是margin-bottom 和margin-top 元素。因此，如果您在 .Rmd 文件中的 yaml 之后添加以下内容，那么您应该能够修改相关部分。

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

【讨论】：

太棒了！谢谢！这对我来说几乎完美。一个小问题是第一张幻灯片（即我放置style 标签的位置）不再起作用（即带有背景图像的那个）。我不得不将style 放在第一个完全空的幻灯片上。有更好的解决方案吗？另外，我想我可以把它放到一个单独的.css 文件中，对吧？

yes 非常适用于单独的 css 文件。非常感谢！