bookdown 中的代码折叠

Question

RMarkdown 中 html 文档的代码折叠选项很棒。该选项使编程方法对那些感兴趣的人来说是透明的，而不会强迫观众滚动浏览数英里的代码。代码与散文和交互式图形输出的紧密放置使整个项目更容易为更广泛的受众所接受，此外它还减少了对额外文档的需求。

对于较大的项目，我使用的是 bookdown，效果很好。唯一的问题是没有代码折叠选项。 bookdown 当前未启用代码折叠。（参见 Enable code folding in bookdown ）

我知道我不需要选择来实现它。我只需要将正确的代码粘贴到正确的地方。但是什么代码和在哪里？

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

Answer 1

整个页面的全局 Hide/Show 按钮

要将@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 header 中调用此文件，如下例所示：

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

Whosebug question
<https://whosebug.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)
```

新编辑：每个块的本地 Hide/show 按钮

我终于找到了解决办法！
在查看正常 html 输出（无 bookdown）的代码折叠行为时，我能够将其添加到 bookdown。主要 javascript 函数需要找到 .sourceCode class 分部才能与 bookdown 一起使用。然而，这也需要 bootstrap 的互补 javascript 功能，但不是全部。这适用于 gitbook 和 html_document2.
以下是步骤：

在与 Rmd 文件相同的目录中创建一个 js 文件夹
下载 javascript 函数 transition.js 和 collapse.js 例如：https://github.com/twbs/bootstrap/tree/v3.3.7/js 并将它们存储在您的 js 文件夹中
使用以下代码在名为 codefolding.js 的 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 脚本中，所有三个函数都被读取并包含在 header 中，因此 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
---

Whosebug question
<https://whosebug.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 浏览器中的按钮，但效果不佳。但是，这对 firefox 没问题。
您会看到此代码中有一点 css，但是您当然可以修改这些按钮的位置和颜色以及您想要的任何内容，再添加一些 css.

编辑：合并全局和本地按钮

编辑 2017-11-13：全局 code-folding 按钮与单个 bloc 按钮很好地集成。 功能 toggle_R 终于没有必要了，但你需要在 bootstrap.

中获取函数 dropdown.js

调用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")
```

新的全局按钮显示了一个下拉菜单，可以在 "show all code" 或 "hide all code" 之间进行选择。使用window.initializeCodeFolding("show" === "show")默认显示所有代码，而使用window.initializeCodeFolding("show" === "hide")默认隐藏所有代码。

Answer 2

我为 pandoc 写了一个过滤器：

将所有代码块包装在 HTML5 <details> 标签中
将本地按钮添加到 fold/unfold 代码
按钮文本通过 onclick javascript 事件

可以找到过滤器 here. Needs python distribution with panflute 安装到运行。

通过pandoc_args: ["-F", "path/to/collapse_code.py"]

添加到预订单

Answer 3

我制作了 R 包 rtemps，其中包括一个随时可用的记事本模板 带有代码折叠按钮 等等（主要基于塞巴斯蒂安·罗切特 answer/post）。检查一下 here!

bookdown 中的代码折叠

Code folding in bookdown

html

javascript

r

code-folding

bookdown

整个页面的全局 Hide/Show 按钮

新编辑：每个块的本地 Hide/show 按钮

编辑：合并全局和本地按钮