reveal.js幻灯片中RMarkdown代码块的高度

Question

我一直在遇到我的代码块在我的幻灯片中溢出的问题，因此必须滚动它们。不适合教学。

1. 如何以块为单位使块上的代码块更高（或更宽）？

2. 如何在reveal.js或其他html格式中再次以块为单位更改代码文本大小。我知道全局我可以改变CSS中的东西，但希望比这更有活力。

P.S。如果有人想知道如何在不影响其他幻灯片元素的情况下更改中心文本行为，那么最近会遇到一个问题，并且它非常重要，但可行。

Answer 1

使用CSS自定义代码块

您可以使用fenced_code_attributes将CSS类（或几个不同的类）添加到某些代码块。为此，您可以将此选项添加到YAML标头中，并使用knit_hoooks$set()定义新的挂钩（有关详细信息，请参阅Hooks）。之后，我们可以使用块选项class = 'myCssClass'。

在下面的示例中，我们定义了一个类.smallCode，它为块设置了一定的宽度和较小的字体大小。在最终文档中，结果如下所示：

<pre class="sourceCode r smallCode">
  <code class="sourceCode r">
  THE CODE WE PRODUCED
  </code>
</pre>

如您所见，我们刚刚将smallCode类添加到<pre>元素中！耶！

您可以修改任何内容，字体样式，背景等等。有关可能性的概述，请查看此CSS Tutorial

包装源代码

如果您希望包装源代码，可以使用chunk选项tidy=T及其选项width.cutoff（也在下面的示例中实现）。

可重复的例子：

---
title: "Customized Code Chunks"
author: Martin Schmelzer
date: March 22, 2005
output: 
  revealjs::revealjs_presentation:
    md_extensions: +fenced_code_attributes
---
<style>
pre.smallCode {
  width:  360px;               /* Change the width of the chunk */
  height: 360px;               /* Change the height of the chunk */
  font-size: 0.4em;            /* Change the font-size */
  background-color: lightgrey; /* Change background color */
} 
</style>

```{r, include=FALSE}
knitr::knit_hooks$set(source = function(x, options) {
  return(paste0(
    "```{.r",
    ifelse(is.null(options$class),
      "", 
      paste0(" .", gsub(" ", " .", options$class))
    ),
    "}\n",
    x,
    "\n```"
  ))
})
```

# Customized Code Chunks

## Example

<!-- Here we use the option tidy=TRUE with a cutoff after 40 characters -->
```{r, class = 'smallCode', tidy=T, tidy.opts=list(width.cutoff=40)}
df <- data.frame(A = c(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20))
```

以下是我们刚刚定制的代码块的屏幕截图：