Plegado de código en bookdown

Solución:

Botón Ocultar / Mostrar global para toda la página

Para usar la sugerencia de @ Yihui para un botón que dobla todo el código en la salida html, debe pegar el siguiente código en un archivo externo (lo nombré header.html aquí):

Editar: modifiqué la función toggle_R para que el botón muestre Hide Global o Show Global al hacer clic en él.

En este script, puede modificar la posición y el código CSS asociado al botón directamente con el style opciones o agréguelo en su archivo css. Tuve que configurar el z-index a un valor alto para asegurarse de que aparece sobre otras divisiones.
Tenga en cuenta que este código javascript solo pliega el código R llamado con echo=TRUE, que se le atribuye un class="r" en el html. Esto está definido por comando var x = document.getElementsByClassName('r');

Luego, llame a este archivo en el encabezado YAML de su secuencia de comandos rmarkdown, como en el siguiente ejemplo:

---
title: "Toggle R code"
author: "StatnMap"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
  bookdown::html_document2:
    includes:
      in_header: header.html
  bookdown::gitbook:
    includes:
      in_header: header.html
---

Stackoverflow question


```r setup, include=FALSE
knitr::opts_chunk$set(echo = TRUE)
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see .

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```r cars
summary(cars)
```

Nueva edición: botón Ocultar / mostrar local para cada fragmento

¡Finalmente encontré la solución!
Mientras observaba el comportamiento de plegado de código para la salida html normal (sin bookdown), pude agregarlo a bookdown. La función principal de javascript necesita encontrar .sourceCode divisiones de clases para trabajar con bookdown. Sin embargo, esto también requiere funciones javascript complementarias de bootstrap, pero no todas. Esto funciona con gitbook y html_document2.
Estos son los pasos:

1. Crear un js carpeta en el mismo directorio que su archivo Rmd
2. Descargar funciones de javascript transition.js y collapse.js aquí, por ejemplo: https://github.com/twbs/bootstrap/tree/v3.3.7/js y guárdelos en su js carpeta
3. Cree un nuevo archivo en el js carpeta llamada codefolding.js con el siguiente código. Esto es lo mismo que para la opción rmarkdown code_folding pero con pre.sourceCode agregado para encontrar fragmentos de código R:

codefolding.js código:

window.initializeCodeFolding = function(show) 

  // handlers for show-all and hide all
  $("#rmd-show-all-code").click(function() 
    $('div.r-code-collapse').each(function() 
      $(this).collapse('show');
    );
  );
  $("#rmd-hide-all-code").click(function() 
    $('div.r-code-collapse').each(function() 
      $(this).collapse('hide');
    );
  );

  // index for unique code element ids
  var currentIndex = 1;

  // select all R code blocks
  var rCodeBlocks = $('pre.sourceCode, pre.r, pre.python, pre.bash, pre.sql, pre.cpp, pre.stan');
  rCodeBlocks.each(function() 

    // create a collapsable div to wrap the code in
    var div = $('
');
    if (show)
      div.addClass('in');
    var id = 'rcode-643E0F36' + currentIndex++;
    div.attr('id', id);
    $(this).before(div);
    $(this).detach().appendTo(div);

    // add a show code button right above
    var showCodeText = $('' + (show ? 'Hide' : 'Code') + '');
    var showCodeButton = $('');
    showCodeButton.append(showCodeText);
    showCodeButton
        .attr('data-toggle', 'collapse')
        .attr('data-target', '#' + id)
        .attr('aria-expanded', show)
        .attr('aria-controls', id);

    var buttonRow = $('
');
    var buttonCol = $('
');

    buttonCol.append(showCodeButton);
    buttonRow.append(buttonCol);

    div.before(buttonRow);

    // update state of button on show/hide
    div.on('hidden.bs.collapse', function () 
      showCodeText.text('Code');
    );
    div.on('show.bs.collapse', function () 
      showCodeText.text('Hide');
    );
  );

4. En el siguiente script rmarkdown, las tres funciones se leen e incluyen como están en el encabezado, de modo que el js carpeta no es útil para el documento final en sí. Al leer las funciones js, también agregué la opción a show bloques de código de forma predeterminada, pero puede optar por ocultarlos con hide.

código rmarkdown:

---
title: "Toggle R code"
author: "StatnMap"
date: '`r format(Sys.time(), "%d %B, %Y")`'
output:
  bookdown::html_document2:
    includes:
      in_header: header.html
  bookdown::gitbook:
    includes:
      in_header: header.html
---

Stackoverflow question



```r setup, include=FALSE
# Add a common class name for every chunks
knitr::opts_chunk$set(
  echo = TRUE)
```
```r htmlTemp3, echo=FALSE, eval=TRUE
codejs <- readr::read_lines("js/codefolding.js")
collapsejs <- readr::read_lines("js/collapse.js")
transitionjs <- readr::read_lines("js/transition.js")

htmlhead <- 
  paste('





', sep = "n")

readr::write_lines(htmlhead, path = "header.html")
```

## R Markdown

This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see .

When you click the **Knit** button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

```r cars
summary(cars)
```

```r plot
plot(cars)
```

Este script muestra los botones en el navegador Rstudio pero no funciona bien. Sin embargo, esto está bien con Firefox.
Verás que hay un poco css en este código, pero por supuesto puedes modificar la posición y el color y lo que quieras en estos botones con algo más de CSS.

Editar: combinar botones globales y locales

Editar 2017-11-13: Botón de plegado de código global bien integrado con botones de bloque individuales. Función toggle_R finalmente no es necesario, pero necesita obtener la función dropdown.js en bootstrap.

El botón global se llama directamente en el fragmento de código al llamar js archivos:

```r htmlTemp3, echo=FALSE, eval=TRUE
codejs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/codefolding.js")
collapsejs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/collapse.js")
transitionjs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/transition.js")
dropdownjs <- readr::read_lines("/mnt/Data/autoentrepreneur/js/dropdown.js")

htmlhead <- c(
  paste('






', sep = "n"),
  paste0('

')
)

readr::write_lines(htmlhead, path = "/mnt/Data/autoentrepreneur/header.html")
```

El nuevo botón global muestra un menú desplegable para elegir entre “mostrar todo el código” u “ocultar todo el código”. Utilizando window.initializeCodeFolding("show" === "show") todos los códigos se muestran de forma predeterminada, mientras que window.initializeCodeFolding("show" === "hide"), todos los códigos están ocultos de forma predeterminada.

Escribí un filtro para pandoc que:

• envuelve todos los bloques de código en HTML5

  etiquetas
• agrega un botón local para doblar / desplegar código
• el texto del botón alterna entre “Mostrar código” y “Ocultar código” (siéntase libre de personalizarlo) a través de onclick evento javascript

El filtro se puede encontrar aquí. Necesita distribución de Python con panflute instalado para ejecutarse.

Agregar a bookdown a través de pandoc_args: ["-F", "path/to/collapse_code.py"]

Hice el R paquete rtemps que incluye una plantilla de bookdown lista para usar con botones plegables de código entre otros (en gran parte basado en la respuesta / publicación de Sébastien Rochette). ¡Compruébalo aquí!

No se te olvide difundir este escrito si te valió la pena.

---

---

Utiliza Nuestro Buscador