Mostrar varios fragmentos de código de forma concisa

Estoy creando un blog blogdownen el que comparo el código de R y el código de Stata. Me gustaría mostrar ambos códigos para que el usuario pueda comparar cómo se hace en R y en Stata. Sin embargo, poner dos o más fragmentos seguidos (código para R, código para salida Stata +) hace que la lectura sea bastante incómoda.

Se me ocurrieron varios diseños para incluir varios fragmentos, pero no sé si ya están implementados o si es posible hacerlo.

Tiene un botón para mostrar / ocultar fragmentos (un botón por fragmento )

Una idea sería tener:

los fragmentos de código R visibles de forma predeterminada en el artículo,
los fragmentos de código Stata son invisibles por defecto pero visibles si el usuario hace clic en un botón

Esta persona y esta persona lograron plegar sus fragmentos de código en blogdown, pero aparentemente oculta o muestra todos los fragmentos de forma predeterminada. ¿Cómo puedo ocultar solo algunos fragmentos por defecto? ¿Hay una opción (como las opciones eval, echo...) que oculta o muestra el fragmento de código blogdown?

Trozos con "pestañas"

El título de esta parte habla por sí mismo: ¿es posible tener pestañas en un fragmento para que podamos cambiar de un código a otro (al igual que las pestañas en los navegadores web, por ejemplo)?

Mostrar dos trozos uno al lado del otro

En algunos blogdowntemas (tal vez todos, no lo sé), el ancho es bastante reducido y hay algo de espacio no utilizado en los lados. Por lo tanto, ¿es posible aumentar el ancho en algunas partes de un artículo y mostrar dos fragmentos uno al lado del otro?

¿Alguna idea de si uno de estos diseños se puede realizar blogdown?

r blogdown

— bretauv
fuente

Parece que Python y R están uno al lado del otro en algún lugar, no pude replicarlo, rezando para que alguien resuelva esto, tengo un blog que realmente mejoraría si esto fuera posible

— Bruno

¿ blogdownTe permite agregar CSS? Usando CSS puedes hacer dos bloques de código y ponerlos uno al lado del otro. Con CSS también podría mostrar u ocultar los fragmentos, y podría hacer las pestañas, pero ese no es mi punto fuerte.

— BeastCoder

@BeastCoder Creo que blogdownpuede usar CSS (ver aquí ) pero nunca lo he usado, así que lo intentaré, pero no creo que pueda lograr esto

— bretauv

@bretauv Creo que si pudieras resolverlo, valdría la pena, puedo dejarte tres tutoriales que pueden ponerte en marcha por completo si quieres tomar ese camino.

— BeastCoder

1. youtu.be/UB1O30fR-EE (que es un curso intensivo de HTML) 2. youtu.be/yfoY53QXEnI (que es un curso intensivo de CSS) 3. youtu.be/JJSoEo8JSnc (flexblock) Esas cosas deberían poder conseguirte los fragmentos de código uno al lado del otro, pero también le proporcionarán información futura que siempre será útil. Agregar el código de desaparición y reaparición puede ser más difícil, pero si desea un enlace de algo para comenzar, hágamelo saber. No estoy muy familiarizado con el blogdown, pero podría haber otra forma en la que no necesita CSS. De cualquier manera, recomendaría el CSS

— BeastCoder

Respuestas:

Bien, aquí hay una respuesta parcial. Podría poner varios fragmentos uno al lado del otro, pero no sé cómo realizar las otras proposiciones en mi publicación.

Esto es lo que hice. Basado en esta página , pongo un código CSS en mi .Rmarkdownarchivo que contiene uno de los artículos de mi blog.

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

Aquí, colocará el código head(mtcars)y su salida en dos fragmentos uno al lado del otro. Si coloca otro fragmento anteriormente </div>, el orden será: un fragmento, su salida, un fragmento, su salida, etc. Hay muchas opciones para personalizar la visualización de las dos (o más) columnas. Sin embargo, hay varias cosas que no puedo hacer:

No sé si es posible pedir tres trozos. Por ejemplo, si agrega un fragmento después del que tiene head(mtcars), el orden será: fragmento1, salida de fragmento1, fragmento2. No sé si se puede reorganizar en: chunk1, chunk2, salida de chunk1.
Si pongo este código en un archivo CSS separado, el fragmento en cuestión se mostrará como si fuera texto normal. ¿Cómo puedo poner este código en un archivo CSS externo? Sé que esto se explica en el libro deblogdown 's , pero no pude hacerlo funcionar. Lo que intenté hasta ahora es:
- ponga el código arriba (entre <style>y </style>) en un archivo que nombré main.cssy que coloqué enthemes/tale-hugo/static/css
- pon el código a continuación al comienzo de mi .Rmarkdownarchivo. Traté de reemplazar la ruta por mi ruta absoluta al archivo main.cssy también intenté reemplazar style.csspor main.cssel código a continuación, pero sin éxito
```
<html>
    <link rel="stylesheet" href="/css/style.css" />
</html>
```
- También intenté poner la ruta en customCSS config.tomlpero no funcionó
Como CSS parecía funcionar, quería ver si era posible crear pestañas con él. De hecho, es posible, pero requiere un código JavaScript y nunca lo he usado antes, así que si alguien puede ayudar con eso, gracias de antemano.

Básicamente, esta es una base de trabajo que podría actualizarse si encuentro soluciones, pero si sabe cómo resolver algunos de estos problemas, no lo dude.

— bretauv
fuente

@BeastCoder esto es lo que he hecho hasta ahora

— bretauv

Como mi respuesta anterior fue un poco desordenada y no muy detallada, formulo una nueva respuesta que está bien con lo que quería hacer (es decir, tener la posibilidad de doblar algunos fragmentos de código).

La solución es usar el paquete de detalles de Jonathan Sidi , como se señala en esta respuesta . Originalmente, el objetivo de este paquete era ocultar algunas salidas que ocupan mucho espacio, como sessionInfoen documentos HTML hechos con R Markdown (y, por lo tanto, también con R Blogdown). Aquí hay un ejemplo (tomado del sitio web del paquete):

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

```{r}
library(details)

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

Sin embargo, lo que quiero ocultar no es la salida de algún código R sino un código Stata (que no debe ejecutarse), de modo que los lectores puedan comparar el código R con el código Stata si lo desean. Por lo tanto, debemos usar algo de HTML para hacerlo:

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

Ahora, los lectores pueden ver el código Stata si quieren y aquellos que no quieren no se distraen con demasiados fragmentos de código. Esto también funciona para los artículos de Blogdown (ya que es "solo" algo de R Markdown en un sitio web).

Más características ( personalizar los fragmentos ocultos, por ejemplo) se detallan en el sitio web del paquete.

— bretauv
fuente