简洁地显示几个代码块

我正在创建一个博客，blogdown用于比较R中的代码和Stata中的代码。我想显示两个代码，以便用户可以比较在R和Stata中的执行情况。Howewer，将两个或更多的块连续放置（R的代码，Stata +输出的代码）使阅读非常不舒服。

我想到了几个布局，其中包括几个块，但我不知道它们是否已实现，或者是否有可能实现。

有一个按钮来显示/隐藏块（每个块一个按钮）

一种想法是：

本文默认显示的R代码块，
默认情况下，Stata代码块不可见，但如果用户单击按钮，则可见

此人与这个人成功地折叠在blogdown他们的代码块，但显然它在默认情况下隐藏或显示每个块。默认情况下，我如何只隐藏一些块？是否有一个选项（如options eval，echo...）隐藏或显示代码块blogdown？

有“标签”的块

这部分的标题说明了一切：是否可以将标签页放在一个块中，以便我们可以从一种代码切换到另一种代码（例如，就像Web浏览器中的标签页一样）？

并排显示两个块

在某些blogdown主题（也许我不知道）中，宽度已大大减小，并且两侧有一些未使用的空间。因此，是否可以增加商品某些部分的宽度并并排显示两个块？

任何想法是否可以实现这些布局之一blogdown？

r blogdown

— 布雷泰夫
source

我似乎Python和并排的地方R侧，无法复制它，祈祷有人来解决这个问题，我有真的会改善，如果这是可能的一个博客

— 布鲁诺

是否blogdown允许您添加CSS？使用CSS，您可以制作两个代码块并将它们并排放置。使用CSS，您还可以显示或隐藏块，并且可以执行选项卡，但这不是我的强项。

— BeastCoder

@BeastCoder我认为blogdown可以使用CSS（请参阅此处），但我从未使用过，所以我会尝试，但我认为我将无法实现

— bretauv

@bretauv我认为，如果您能弄清楚这也许是值得的，那么我可以给您留下三个教程，如果您想走这条路的话，可以使您完全启动并运行。

— BeastCoder

1. youtu.be/UB1O30fR-EE（这是HTML崩溃课程）2. youtu.be/yfoY53QXEnI（这是CSS崩溃课程）3. youtu.be/JJSoEo8JSnc（flexblock）这些东西应该能够帮助您并排的代码块，但它们还将为您提供将来的信息，这些信息将总是有帮助的。添加消失的代码和重新出现的代码可能会比较困难，但是如果您想要链接某个内容以开始使用，请告诉我。我对Blogdown不太熟悉，但是可能还有另一种不需要CSS的方式。无论哪种方式，我都建议使用CSS

— BeastCoder

Answers:

好吧，这是部分答案。我可以并排放置几个块，但我不知道如何在我的帖子中实现其他主张。

这就是我所做的。基于此页面，我在.Rmarkdown文件中放入了一些CSS代码，其中包含博客的其中一篇文章。

<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: visible;
}

.flex-container > div {
  width: 200px;
  margin: 10px;
  text-align: left;
  line-height: 75px;
  font-size: 30px;
}
</style>
<div class="flex-container">
```{r message = FALSE}
head(mtcars)
```
</div>

在这里，它将代码head(mtcars)及其输出并排放置在两个块中。如果在之前放置另一个块</div>，则顺序为：一个块，其输出，一个块，其输出等。有许多选项可自定义两个（或更多）列的显示。但是有几件事我不能做：

我不知道是否可以订购三个块。例如，如果在后面添加一个块head(mtcars)，则顺序为：chunk1，chunk1的输出，chunk2。我不知道是否可以重新排列它：chunk1，chunk2，chunk1的输出。
如果我将此代码放在单独的CSS文件中，则相关的块将显示为正常文本。如何将此代码放在外部CSS文件中？我知道这已在blogdown的书中进行了说明，但我无法使其有效。到目前为止，我尝试过的是：
- 将上面的代码（<style>和之间</style>）放在一个我命名main.css并放入的文件中themes/tale-hugo/static/css
- 将代码放在.Rmarkdown文件的开头。我试图用我的文件绝对路径替换路径，main.css也尝试在下面的代码中仅替换style.css为main.css，但是没有成功
```
<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>
```
- 我也尝试将路径放入customCSS中，config.toml但是没有用
由于CSS似乎可以工作，所以我想看看是否可以使用它创建选项卡。确实有可能，但是它需要一些JavaScript代码，而我之前从未使用过它，所以如果有人可以提供帮助，请提前感谢。

基本上，这是一个工作基础，如果我找到解决方案，可能会进行更新，但是如果您知道如何解决其中的一些问题，请不要犹豫。

— 布雷泰夫
source

@BeastCoder这是我到目前为止所做的

— bretauv

由于我以前的答案有点混乱且不够详细，因此我做出了一个新的答案，该答案与我想做的事情很好（即可以折叠一些代码块）。

解决方案是使用Jonathan Sidi的details包，如该答案所指出。最初，此软件包的目的是隐藏一些占用大量空间的输出，例如sessionInfo，在使用R Markdown（因此也使用R Blogdown）制作的HTML文档中。这是一个示例（取自软件包的网站）：

---
title: "Test"
output: html_document
---

```{r}
library(details)

sessioninfo::session_info()%>%
  details::details(summary = 'current session info')
```

但是，我要隐藏的不是某些R代码的输出而是Stata代码（这不是要运行），以便读者可以根据需要将R代码与Stata代码进行比较。因此，我们必须使用一些HTML来做到这一点：

---
title: "Test"
output: html_document
---

## Regression with R and Stata

```{r, eval=FALSE}
lm(mpg ~ drat, data = mtcars)
```

<details>
<summary> Stata </summary>
```stata
regress y x
```
</details>

现在，读者可以看到Stata代码，如果他们愿意，不愿意的人不会被太多的代码块所分散。这也适用于Blogdown文章（因为它只是网站上的某些R Markdown）。

软件包的网站上详细介绍了更多功能（例如，自定义隐藏的块）。

— 布雷泰夫
source