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:
- Crea una carpeta
js
en el mismo directorio que tu archivo Rmd - Descargue las funciones javascript
transition.js
ycollapse.js
aquí, por ejemplo: https://github.com/twbs/bootstrap/tree/v3.3.7/js y guárdelas en su carpetajs
- Cree un nuevo archivo en la carpeta
js
llamadacodefolding.js
con el siguiente código. Esto es lo mismo que para la opción rmarkdown code_folding pero conpre.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'');
});
});
}
- 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 parashow
bloques de código de forma predeterminada, pero puede optar por ocultarlos conhide
.
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.