Display several code chunks in a concise way

Question

I'm creating a blog with blogdown in which I compare code from R and code from Stata. I would like to show both codes so that the user can compare how it's done in R and in Stata. Howewer, putting two or more chunks in a row (code for R, code for Stata + output) makes the reading quite uncomfortable.

Several layouts came to my mind to include several chunks but I don't know if they are already implemented or if it's even possible to do so.

---

Have a button to display/hide chunks (one button per chunk)

One idea would be to have:

• the R code chunks visible by default in the article,
• the Stata code chunks invisible by default but visible if the user clicks on a button

This person and this person succeeded in folding their code chunks in blogdown but apparently it hides or shows every chunks by default. How can I hide only some chunks by default? Is there an option (like the options eval, echo...) that hides or shows code chunk in blogdown?

---

Chunks with "tabs"

The title of this part speaks for itself: is it possible to have tabs in a chunk so that we can switch from one code to the other (just like tabs in web browsers for example)?

---

Display two chunks side by side

In some blogdown themes (maybe all, I don't know), the width is quite reduced and there is some unused space on the sides. Therefore, is it possible to increase the width on some parts of an article and to display two chunks side by side?

Any idea if one of these layouts can be realized in blogdown?

Wilburn

I have seem Python and R side by side somewhere , couldn't replicate it, praying for someone to solve this,I have a blog that would really improve if this was possible – Hypogenous

Does blogdown allow you to add CSS? Using CSS you could make two blocks of code and put them side by side. With CSS you could also display or hide the chunks, and might be able to do the tabs, but that is not my strong point. – Statics

@Statics I think blogdown can use CSS (see here) but I've never used it so I will try but I don't think I will be able to achieve this – Wilburn

@Wilburn I think that if you could figure it out it might be worth it, I can leave you three tutorials that can get you completely up and running if you want to take that path. – Statics

1. youtu.be/UB1O30fR-EE (that is an HTML crash course) 2. youtu.be/yfoY53QXEnI (that is a CSS crash course) 3. youtu.be/JJSoEo8JSnc (flexblock) Those things should be able to get you the side by side code chunks but they‘ll also supply you with future information that will always be helpful. Adding the disappearing and reappearing code might be harder but if you want a link of something to get you started on that just let me know. I’m not too familiar with blogdown but there could be another way where you don’t need CSS. Either way, I‘d recommend the CSS – Statics

@Statics thanks I will check this out – Wilburn

@Wilburn Alright, sounds good let me know if you go through with it :-D – Statics

@Wilburn I just did a little bit more research and it looks like you can put the text into html tags too, I would recommend putting the text into a <span>, then I would add a css file to center the to things using a class on the span – Statics

@Hypogenous see my (partial) answer below – Wilburn

Answer 1

I have found another alternative, that seems to be the best one so far: use panelsets of {xaringanExtra}.

Panelsets work for {xaringan} presentations as well as for R Markdown (and therefore {blogdown}) outputs. See here for more options and details. Here's a small demo:

---
title: Title
output:
  blogdown::html_page
---

```{r include = FALSE}
library(xaringanExtra)
# enable panelset
use_panelset()
```

## Title 

Here's a simple way to display several code chunks in a concise way:


::::: {.panelset}

<!-- First panel -->
::: {.panel}
[R code]{.panel-name}

Check the R code below:
```{r echo = TRUE, eval = FALSE}
lm(mpg ~ drat, data = mtcars)
```
:::

<!-- Second panel -->
::: {.panel}
[Stata code]{.panel-name}

```
regress y x

```
:::

<!-- Third panel -->
::: {.panel}
[R output]{.panel-name}
```{r echo = FALSE, eval = TRUE}
lm(mpg ~ drat, data = mtcars)
```
:::

::::

Wilburn

Answer 2

Since my previous answer was a bit messy and not very detailed, I make a new answer that is fine with what I wanted to do (i.e having the possibility to fold some code chunks).

The solution is to use Jonathan Sidi's details package, as pointed out by this answer. Originally, the aim of this package was to hide some outputs that take a lot of space, such as sessionInfo, in HTML documents made with R Markdown (and therefore with R Blogdown too). Here's an example (taken from the package's website):

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

```{r}
library(details)

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

However, what I want to hide is not the output of some R code but a Stata code (that is not meant to be run), so that readers can compare R code to Stata code if they want to. Therefore, we must use some HTML to do so:

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

Now, readers can see the Stata code if they want to and those who don't want to are not distracted by too many code chunks. This works for Blogdown articles too (since it is "just" some R Markdown on a website).

More features (customize the hidden chunks for example) are detailed on the package's website.

Wilburn