1

我在讲座中使用 bookdown (html) 而不是幻灯片。我真的很想创建出现/消失的块以包含问题的解决方案。可能我可以通过css做到这一点。但是我现在不知道如何做到这一点，并且还包括我的 css 而不会弄乱 bookdown css

例子：

问题：bla bla bla ?

解决方案揭开

当我点击发现时，我可以显示我的 R 代码和输出。那很好啊 ：）

4

1 回答 1

0

您可以通过 knitr hooks 实现您想要的。当你为代码块（在这个例子中uncover = TRUE）设置了一个钩子选项时，它会触发相应的钩子函数uncover，钩子可以在块输出生成的html代码之前和之后写一些东西。

在下面的代码中，我首先定义了一个 Javascript 函数function uncover(id)，它可以通过 id 发现某些 html 元素。我让钩子uncover生成一个 html 按钮，该按钮在块输出之前调用 Javascript 函数，并用div具有特定 id 和style.display =none 的输出包装。您可以对下面的代码进行修改以适应您的需要，但想法是这样的。

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
uncover <- function(before, options, envir) {
    if (before) {
        id <- options$id
        button_string <- paste0("<button onclick=\"uncover('", 
                                id, 
                                "')\">Uncover</button>")
        div_string <- paste0("<div id = '", id, 
                             "', style = 'display:none'>")
        paste0(button_string, "\n", div_string)
    }
    else {
        "</div>"
    }
}

knitr::knit_hooks$set(uncover = uncover)
```
<script>
function uncover(id) {
    var x = document.getElementById(id);
    x.style.display = 'block';
}
</script>

```{r, uncover = TRUE, id = "script"}
1 + 1
```

编辑于 05/03/2020 目前，knitr 或 pandoc 或工具链中的其他东西拒绝将不可见的 markdown 元素转换为有效的 HTML，因此上述解决方案无法完美运行。一种解决方案是首先让所有东西都可见，但提供一个按钮来隐藏它们，如下所示：

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
uncover <- function(before, options, envir) {
    if (before) {
     id <- options$id
        button_string <- paste0("<button onclick=\"uncover('", 
                                id, 
                                "')\">Uncover</button>")
        div_string <- paste0("<div id = '", id, 
                             "' class = 'cover'>")
        paste0(button_string, "\n", div_string)
    }
    else {
        "</div>"
    }
}

knitr::knit_hooks$set(uncover = uncover)
```

```{r, uncover = TRUE, id = "script"}
1 + 1
```

<script>
function uncover(id) {
    var x = document.getElementById(id);
    x.style.display = 'block';
}

function cover() {
    var xs = document.getElementsByClassName('cover');
    for(count = 0; count < xs.length; count++) {
        xs[count].style.display = 'none';
    }
}
</script>

<button onclick="cover()">Cover all</button>
于 2017-07-02T02:14:21.277 回答