tonic tag preparacion medidas attribute javascript html r code-folding bookdown

javascript - tag - html title attribute



Código doblado en libro de cuentas (1)

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

<script type="text/javascript"> // toggle visibility of R source blocks in R Markdown output function toggle_R() { var x = document.getElementsByClassName(''r''); if (x.length == 0) return; function toggle_vis(o) { var d = o.style.display; o.style.display = (d == ''block'' || d == '''') ? ''none'':''block''; } for (i = 0; i < x.length; i++) { var y = x[i]; if (y.tagName.toLowerCase() === ''pre'') toggle_vis(y); } var elem = document.getElementById("myButton1"); if (elem.value === "Hide Global") elem.value = "Show Global"; else elem.value = "Hide Global"; } document.write(''<input onclick="toggle_R();" type="button" value="Hide Global" id="myButton1" style="position: absolute; top: 10%; right: 2%; z-index: 200"></input>'') </script>

En este script, puede modificar la posición y el código CSS asociados al botón directamente con las opciones de style o agregarlo en su archivo css. Tuve que establecer el z-index en un valor alto para asegurarme de que aparece sobre otras divisiones.
Tenga en cuenta que este código javascript solo dobla el código R llamado con echo=TRUE , que se le atribuye una class="r" en el html. Esto se define mediante el comando var x = document.getElementsByClassName(''r'');

Luego, llama 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 <https://stackoverflow.com/questions/45360998/code-folding-in-bookdown> ```{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 <http://rmarkdown.rstudio.com>. 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 Local Hide / Show para cada fragmento

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

  1. Crea una carpeta js en el mismo directorio que tu archivo Rmd
  2. Descargue las funciones javascript transition.js y collapse.js aquí, por ejemplo: https://github.com/twbs/bootstrap/tree/v3.3.7/js y guárdelas en su carpeta js
  3. Cree un nuevo archivo en la carpeta js 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:

código codefolding.js :

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 = $(''<div class="collapse r-code-collapse"></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 = $(''<span>'' + (show ? ''Hide'' : ''Code'') + ''</span>''); var showCodeButton = $(''<button type="button" class="btn btn-default btn-xs code-folding-btn pull-right"></button>''); showCodeButton.append(showCodeText); showCodeButton .attr(''data-toggle'', ''collapse'') .attr(''data-target'', ''#'' + id) .attr(''aria-expanded'', show) .attr(''aria-controls'', id); var buttonRow = $(''<div class="row"></div>''); var buttonCol = $(''<div class="col-md-12"></div>''); 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''); }); }); }

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

código de 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 <https://stackoverflow.com/questions/45360998/code-folding-in-bookdown> ```{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('' <script>'', paste(transitionjs, collapse = "/n"), ''</script> <script>'', paste(collapsejs, collapse = "/n"), ''</script> <script>'', paste(codejs, collapse = "/n"), ''</script> <style type="text/css"> .code-folding-btn { margin-bottom: 4px; } .row { display: flex; } .collapse { display: none; } .in { display:block } </style> <script> $(document).ready(function () { window.initializeCodeFolding("show" === "show"); }); </script> '', 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 <http://rmarkdown.rstudio.com>. 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 de css en este código, pero por supuesto puedes modificar la posición y el color y lo que quieras en estos botones con un poco más de CSS.

Editar: combina botones globales y locales

Edit 2017-11-13: botón de plegado de código global bien integrado con botones de bloque individuales. La función toggle_R finalmente no es necesaria, pero debes obtener la función dropdown.js en bootstrap.

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

```{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('' <script>'', paste(transitionjs, collapse = "/n"), ''</script> <script>'', paste(collapsejs, collapse = "/n"), ''</script> <script>'', paste(codejs, collapse = "/n"), ''</script> <script>'', paste(dropdownjs, collapse = "/n"), ''</script> <style type="text/css"> .code-folding-btn { margin-bottom: 4px; } .row { display: flex; } .collapse { display: none; } .in { display:block } .pull-right > .dropdown-menu { right: 0; left: auto; } .open > .dropdown-menu { display: block; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } </style> <script> $(document).ready(function () { window.initializeCodeFolding("show" === "show"); }); </script> '', sep = "/n"), paste0('' <script> document.write(/'<div class="btn-group pull-right" style="position: absolute; top: 20%; right: 2%; z-index: 200"><button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" data-_extension-text-contrast=""><span>Code</span> <span class="caret"></span></button><ul class="dropdown-menu" style="min-width: 50px;"><li><a id="rmd-show-all-code" href="#">Show All Code</a></li><li><a id="rmd-hide-all-code" href="#">Hide All Code</a></li></ul></div>/') </script> '') ) 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". Usando window.initializeCodeFolding("show" === "show") todos los códigos se muestran por defecto, mientras que usando window.initializeCodeFolding("show" === "hide") , todos los códigos están ocultos por defecto.

La opción de doblar código en RMarkdown para documentos html es increíble. Esa opción hace que la metodología programática sea transparente para aquellos que estén interesados, sin forzar a la audiencia a desplazarse a través de kilómetros de código. La colocación ajustada de código con prosa y salida gráfica interactiva hace que todo el proyecto sea más accesible para un público más amplio y, además, reduce la necesidad de documentación adicional.

Para un proyecto más grande, estoy usando bookdown, y funciona genial. El único problema es que no hay una opción de plegado de código. El plegado de código no está habilitado actualmente en la operación de apertura. (ver Habilitar el plegado del código en el libro de cuentas )

Sé que no necesito una opción para hacerlo realidad. Solo necesito pegar el código correcto en el lugar o lugares correctos. Pero, ¿qué código y dónde?

Una alternativa viable sería poner el fragmento de código debajo de los resultados del fragmento en la página. O, finalmente, ponerlos como un apéndice. Podría hacerlo con html pero no reproducible como rbookdown.