代码折叠在书中

Question

RMarkdown中用于html文档的代码折叠选项非常棒。这个选项使编程方法对那些感兴趣的人来说是透明的，而不是强迫听众滚动数英里的代码。紧密的代码与散文和交互式图形输出使整个项目更容易被更广泛的受众访问，而且它还减少了对额外文档的需求。

对于一个更大的项目，我使用的是预订，它工作得很好。唯一的问题是没有代码折叠选项。代码折叠目前未在预订中启用。(见在预订中启用代码折叠 )

我知道我不需要选择来实现这一切。我只需要在正确的地方粘贴正确的代码。但是什么密码在哪里？

一个可行的替代方法是将代码块放在页面块的输出下面。或者，最后，把它们作为附录。我可以用html实现这一点，但不能像rbookdown那样重复。

Answer 1

整个页面的全局隐藏/显示按钮

要使用@Yihui的提示按钮折叠html输出中的所有代码，您需要将以下代码粘贴到外部文件中(我在这里将其命名为header.html )：

编辑:我修改了函数toggle_R，使按钮在单击它时显示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选项修改与按钮相关的位置和css代码，或者将其添加到您的css文件中。我必须将z-index设置为一个高值，以确保它出现在其他部门之上。

注意，这个javascript代码只折叠了用echo=TRUE调用的R代码，这在html中是一个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 =真)

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

摘要(Cars)

新编辑:每个块的本地隐藏/显示按钮

我终于找到解决办法了！

在查看正常html输出的代码折叠行为(没有预订)时，我能够将其添加到bookdown中。主要的javascript函数需要找到.sourceCode类部门来处理预订。然而，这也需要补充引导的javascript函数，但不是全部。这适用于gitbook和html_document2。

以下是几个步骤：

1. 在与Rmd文件相同的目录中创建js文件夹
2. 下载javascript函数transition.js和collapse.js，例如：https://github.com/twbs/bootstrap/tree/v3.3.7/js并将它们存储在js文件夹中
3. 使用以下代码在js文件夹中创建一个名为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');
    });
  });

}

1. 在下面的rmarkdown脚本中，所有三个函数都会像头一样被读取和包含，这样js文件夹对最终文档本身就没用了。在读取js函数时，默认情况下，我还将该选项添加到show代码块中，但您可以选择使用hide隐藏它们。

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}

为每个块添加一个公共类名

knitr::opts_chunk$set(

echo =真)

```{r htmlTemp3, echo=FALSE, eval=TRUE}

- readr::read_lines("js/codefolding.js")

<- readr：：read_lines(“js/uncse.js”)

transitionjs <- readr：：read_lines(“js/Trantion.js”)

htmlhead <-

糊(‘)

粘贴(过渡，折叠= "\n")，

‘

粘贴(折叠，折叠= "\n")，

‘

粘贴(编解码器，折叠= "\n")，

‘

代码-折叠-btn{边距-底部: 4px；}

.row {显示: flex；}

.collapse {显示:无；}

.in {显示:块}

$(Document).ready(函数() {)

Window.initializeCodeFolding(“显示”===“显示”)；

})；

'，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}

摘要(Cars)

```{r plot}

阴谋(汽车)

此脚本显示Rstudio浏览器中的按钮，但不能正常工作。然而，这对firefox来说是可以的。

您将看到这段代码中有一些css，但是当然您可以使用更多的css在这些按钮上修改位置、颜色和任何您想要的东西。

编辑:将全局按钮和本地按钮合并

编辑2017-11-13:全球代码折叠按钮与单独的集团按钮很好地结合。函数toggle_R最终没有必要，但您需要在引导中获得函数dropdown.js。

调用js文件时，在代码块中直接调用全局按钮：

```{r htmlTemp3, echo=FALSE, eval=TRUE}

编解码器<- readr::read_lines("/mnt/Data/autoentrepreneur/js/codefolding.js")

折叠<- readr::read_lines("/mnt/Data/autoentrepreneur/js/collapse.js")

传递<- readr::read_lines("/mnt/Data/autoentrepreneur/js/transition.js")

下拉列表<- readr::read_lines("/mnt/Data/autoentrepreneur/js/dropdown.js")

htmlhead <- c(

糊(‘)

粘贴(过渡，折叠= "\n")，

‘

粘贴(折叠，折叠= "\n")，

‘

粘贴(编解码器，折叠= "\n")，

‘

粘贴(下拉列表，折叠= "\n")，

‘

代码-折叠-btn{边距-底部: 4px；}

.row {显示: flex；}

.collapse {显示:无；}

.in {显示:块}

.下拉菜单{

right: 0;

left: auto;

}

.open >.下拉菜单{

display: block;

}

.下拉菜单{

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

}

$(Document).ready(函数() {)

Window.initializeCodeFolding(“显示”===“显示”)；

})；

'，9= "\n")，

paste0(‘)

Document.write(\‘代码显示所有CodeHide所有代码\’)

')

)

readr::write_lines(htmlhead，path =“/mnt/Data/auto企业家/Data er.html”)

新的全局按钮显示一个下拉菜单，在“显示所有代码”和“隐藏所有代码”之间进行选择。使用window.initializeCodeFolding("show" === "show")，默认显示所有代码，而使用window.initializeCodeFolding("show" === "hide")，默认情况下隐藏所有代码。

Answer 2

我制作了R包rtemps，其中包括一个现成的预订模板，其中包括代码折叠按钮(主要基于Sébastien的答案/post)。看看吧，这里！

Answer 3

我为pandoc写了一个过滤器：

• 包装HTML5 <details>标记中的所有代码块。
• 添加要折叠/展开代码的本地按钮
• 通过onclick javascript事件在“显示代码”和“隐藏代码”之间切换按钮文本(请随时自定义)

过滤器可以找到这里。需要安装python发行版并安装泛笛才能运行。

通过pandoc_args: ["-F", "path/to/collapse_code.py"]添加到预订