css - 字体大小和行间距 R Slidify

Question

我正在尝试创建我的第一个 Slidify 演示文稿。我对 JS、CSS 和 HTML5 比较陌生。我正在使用以下 YAML Material 和 R Markdown 代码。我想创建一个简单的幻灯片来展示 R 可以用作大型计算器。我的问题是我只能将大约 3 个简单的表达式及其返回的输出放在一张幻灯片上。因此，我将非常感谢关于如何更好地控制 Slidify 输出的任何可能建议(较小的字体大小，或围绕突出显示的语法和评估/返回的 R 输出的较小边框)。

下面是我的 .Rmd 文件:

---
title       : An Introduction to R
subtitle    : Getting You "R Aware" And Beyond
author      : Christopher Meaney
job         : Biostatistician, University of Toronto
framework   : io2012        # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : tomorrow      # 
widgets     : []            # {mathjax, quiz, bootstrap}
mode        : selfcontained # {standalone, draft}

--- .nobackground 

## R Can be Used as A Big Calculator

```{r, results='asis', echo=TRUE}
## Addition
1 + 1
## Exponentiation followed by multiplication (BEDMAS)
4*5^2
## Area of a circle of radius r=2
pi*2^2
## Natural logarithm of 1 multiplied by exponential (function) evaluated at 0
log(1)*exp(0)
```

Github 上对这个问题有很好的讨论。 https://github.com/ramnathv/slidify/issues/189但是，我似乎无法弄清楚@Robert 的回答中哪一部分涉及语法突出显示与字体大小和边框调整。此外，讨论中提出了很多建议的解决方案，对于菜鸟来说，哪个最容易实现？

作为后续行动，我将如何全局设置/应用此选项，以便所有由 knitr 评估并由 slidify 呈现的 R block 都具有相同的小/压缩属性？

Answer 1

我相当有信心这不是解决问题的最有效方法。然而，它似乎实现了许多目标。所以我会把它写下来，等着看是否有更好的解决方案出现。

我要调整其字体(和其他格式)的 R 语法在一对 <pre> </pre> 之间。标签。

我要调整其字体(和其他格式)的 R 输出在一对 <p> </p> 之间标签。

我只想调整一些幻灯片上的代码。所以我创建了以下 CSS 文件。我将它们存储在目录中:.../mydeck/assets/css/

这是矫枉过正(可能并非全部都是必要的)。

文件 1 (.../mydeck/assets/css/codefont.css)

slide.codefont pre {
font-size: 9px ;
}

文件 2 (.../mydeck/assets/css/outfont.css)

slide.outfont p {
font-size: 9px ;
}

文件 3 (.../mydeck/assets/css/codemargin.css)

slide.codemargin pre {
margin-top: -10px ;
margin-bottom: -10px ;
padding-top: -10px ;
padding-bottom: -10px ;
}

文件 4 (.../mydeck/assets/css/outmargin.css)

slide.outmargin p {
margin-top: -10px ;
margin-bottom: -10px ;
padding-top: -10px ;
padding-bottom: -10px ;
}

然后，当我在 .Rmd 文件中将我的简单 R 指定为大型计算器幻灯片时，我只需添加以下内容:

--- .codefont .outfont .codemargin .outmargin .nobackground 

## R Can be Used as A Big Calculator

```{r, results='asis', echo=TRUE}
## Addition
1 + 1
## Exponentiation followed by multiplication (BEDMAS)
4*5^2
## Area of a circle of radius r=2
pi*2^2
## Natural logarithm of 1 multiplied by exponential (function) evaluated at 0
log(1)*exp(0)
```

这使得 R 语法和 R 输出小于默认值。它还删除了 R 语法和 R 输出之间的一些空白。

• R 语法荧光笔中仍有相当一部分未使用的空白，我很想将其删除(在边框和实际 R 代码之间)。
• 还对使用更少的 CSS 文件(1 或 2 个 CSS 文件而不是 4 个)实现相同结果的可能性发表评论。
• 此外，考虑如何在出现 R 代码的所有幻灯片中实现此方法(因此我不必不断添加 --- .codefont .outfont .codemargin .outmargin 到所有由 R 代码组成的幻灯片。能够将整个事情包装在一个函数中其中 font=, margin=, padding= 可以指定为参数会很酷。

仍在考虑这是一个悬而未决的问题...谢谢。