代码折叠在书上
RMarkdown中的代码折叠选项是非常棒的。 该选项使程序化方法对于感兴趣的人是透明的，而不会迫使观众翻阅数英里的代码。 通过散文和交互式graphics输出，代码的紧密放置使得整个项目更容易被更广泛的读者所接受，而且还减less了对额外文档的需求。
对于一个更大的项目，我正在使用bookdown，而且效果很好。 唯一的问题是没有代码折叠选项。 代码折叠当前未在bookdown中启用。 （请参阅在bookdown中启用代码折叠 ）
我知道我不需要一个select来实现它。 我只需要把正确的代码粘贴在正确的地方或地方。 但是什么代码和哪里？
一个可行的替代方法是将代码块放置在页面中块的输出之下。 或者，最后把它们作为附录。 我可以做到这一点，但不能像rbookdown重现。
全局隐藏/显示button为整个页面
要使用@ Yihui的提示来折叠HTML输出中的所有代码，您需要将以下代码粘贴到外部文件中（我将其命名为header.html ）：
编辑：我修改了函数toggle_R以便button显示Hide Global或Show Global时单击它。
<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>
在这个脚本中，您可以直接使用style选项修改与button相关联的位置和CSS代码，或将其添加到您的CSS文件中。 我不得不把z-index设置得很高，以确保它出现在其他部门。
请注意，这个javascript代码只折叠与echo=TRUE调用的R代码，这是在html中class="r"为class="r" 。 这由命令定义var x = document.getElementsByClassName('r');
然后，在你的rmarkdown脚本的YAML头文件中调用这个文件，如下例所示：
--- 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) ```
新编辑：每个块的本地隐藏/显示button
我终于find了解决scheme！
在查看正常html输出的代码折叠行为（无记事）时，我可以将其添加到bookdown中。 主要的javascript函数需要find.sourceCode类的部门来使用bookdown。 但是，这也需要bootstrap的辅助javascriptfunction，但不是全部。 这与gitbook和html_document2 。
这里是步骤：
- 在与您的Rmd文件相同的目录中创build一个
js文件夹 - 下载javascript函数
transition.js和collapse.js例如： https : //github.com/twbs/bootstrap/tree/v3.3.7/js并将它们存储在您的js文件夹中 - 使用以下代码在
js文件夹中创build一个名为codefolding.js的新文件。 这与rmarkdown code_folding选项相同，但是pre.sourceCode添加了以查找R代码块：
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'); }); }); }
- 在下面的rmarkdown脚本中，所有三个函数都被读取并包含在标题中，这样
js文件夹对最终文档本身是没有用的。 在阅读js函数时，我还添加了默认show代码块的选项，但是您可以select隐藏它们。
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) ```
该脚本显示Rstudio浏览器中的button，但不能正常工作。 但是，这与Firefox的确定。
你会发现在这个代码中有一个小小的css ，但是当然你可以用更多的css来修改这些button的位置和颜色以及任何你想要的。
编辑：合并全局和本地button
编辑2017年11月13日：全球代码折叠button很好地集成了个别集团button。 函数toggle_R最终不是必需的，但是您需要在引导程序中获取函数dropdown.js 。
调用js文件时，全局button在代码块中直接调用：
```{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") ```
新的全局button显示下拉菜单，可在“显示所有代码”或“隐藏所有代码”之间进行select。 使用window.initializeCodeFolding("show" === "show")所有的代码默认显示，而使用window.initializeCodeFolding("show" === "hide") ，默认情况下隐藏所有的代码。
