複数のコードチャンクを簡潔に表示する

私はblogdown、RのコードとStataのコードを比較するブログを作成しています。ユーザーがRとStataでどのように行われるかを比較できるように、両方のコードを表示したいと思います。さらに、2つ以上のチャンクを続けて配置すると（Rのコード、Stata +出力のコード）、読み取りが非常に不快になります。

いくつかのレイアウトがいくつかのチャンクを含むように思いつきましたが、それらがすでに実装されているかどうか、またはそれが可能かどうかさえわかりません。

チャンクを表示/非表示にするボタンがあります（チャンクごとに1つのボタン）

1つのアイデアは、

記事でデフォルトで表示されるRコードチャンク
Stataコードチャンクはデフォルトでは非表示ですが、ユーザーがボタンをクリックすると表示されます

この人とこの人は、blogdownでコードチャンクを折りたたむことに成功しましたが、明らかに、デフォルトですべてのチャンクを非表示または表示します。デフォルトで一部のチャンクのみを非表示にするにはどうすればよいですか？オプション（オプションなどがありeval、echo...）は獣皮かを示すコードチャンクではblogdown？

「タブ」付きのチャンク

この部分のタイトルはそれ自体を物語っています：あるコードから別のコードに切り替えることができるようにタブをチャンクに含めることは可能ですか（たとえばWebブラウザーのタブのように）？

2つのチャンクを並べて表示する

一部のblogdownテーマ（多分、すべてはわかりません）では、幅がかなり狭くなり、側面に未使用のスペースがいくつかあります。したがって、記事の一部の幅を増やし、2つのチャンクを並べて表示することは可能ですか？

これらのレイアウトの1つをで実現できるblogdownかどうかは？

r blogdown

— ブレタウフ
ソース

私はPythonとRをどこかで並べて、それを複製できず、誰かがこれを解決することを祈っていたようです。これが可能であれば本当に改善されるブログがあります

— Bruno

blogdownあなたはCSSを追加することができますか？CSSを使用すると、2つのコードブロックを作成し、それらを並べて配置できます。CSSを使用すると、チャンクを表示または非表示にすることもでき、タブを実行できる場合もありますが、それが私の強みではありません。

— BeastCoder

@BeastCoder blogdownCSSを使用できると思います（ここを参照）が、CSSを使用したことがないので試しますが、これを達成できるとは思いません

— bretauv

@bretauvもしあなたがそれを理解することができればそれは価値があるかもしれないと思います、あなたがその道を進みたいならあなたを完全に稼働させることができる3つのチュートリアルを残すことができます。

— BeastCoder

1. youtu.be/UB1O30fR-EE（HTMLクラッシュコース）2. youtu.be/yfoY53QXEnI（CSSクラッシュコース）3. youtu.be/JJSoEo8JSnc（flexblock）これらのことで、サイドバイサイドのコードチャンクですが、常に役立つ将来の情報も提供します。消えて再登場するコードを追加するのは難しいかもしれませんが、何かを開始するためのリンクが必要な場合は、私に知らせてください。私はブログダウンにあまり詳しくありませんが、CSSを必要としない別の方法があるかもしれません。どちらにしても、CSSをお勧めします

— BeastCoder

回答:

さて、ここに部分的な答えがあります。私はいくつかのチャンクを並べて置くことができましたが、私の投稿の他の命題を実現する方法がわかりません。

これは私がやったことです。このページに基づいて.Rmarkdown、ブログの記事の1つを含むファイルに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)とその出力を2つのチャンクに並べて配置します。の前に別のチャンクを置く</div>と、順序は、チャンク、その出力、チャンク、その出力などになります。2つ（またはそれ以上）の列の表示をカスタマイズする多くのオプションがあります。しかし、私ができなかったことがいくつかあります。

3つのチャンクを注文できるかどうかはわかりません。たとえば、でチャンクの後にチャンクを追加すると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は機能しているようだったので、CSSを使用してタブを作成できるかどうかを確認したいと思いました。それは確かに可能ですが、JavaScriptコードが必要であり、これまで使用したことがありません。

基本的に、これは私が解決策を見つけた場合に更新される可能性のある作業基盤ですが、これらの問題のいくつかを解決する方法を知っている場合は、ためらわないでください。

— ブレタウフ
ソース

@BeastCoderはこれまで私がこれまでに行ったことです

— bretauv

私の以前の答えは少し面倒であまり詳細ではなかったので、私がやりたいこと（つまり、いくつかのコードチャンクを折りたたむ可能性がある）で問題ない新しい答えを作ります。

解決策は、この回答で指摘されているように、Jonathan Sidiの詳細パッケージを使用することです。もともと、このパッケージの目的は、R Markdownで作成された（したがって、R Blogdownでも作成された）HTMLドキュメントなど、多くのスペースを必要とする出力を非表示にすることでした。次に例を示します（パッケージのWebサイトから取得）。sessionInfo

---
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記事でも機能します（Webサイト上のRマークダウンの「ほんの一部」であるため）。

その他の機能（たとえば、非表示のチャンクのカスタマイズ）は、パッケージのWebサイトで詳しく説明されています。

— ブレタウフ
ソース