R Markdown：隐藏剧透文本（悬停在文本元素上）答案

【问题标题】：R Markdown: hide spoiler text (hover over text element)R Markdown：隐藏剧透文本（悬停在文本元素上）
【发布时间】：2018-06-25 09:27:08
【问题描述】：

是否可以在使用 R Markdown 创建的 .html 文件中隐藏文本块？在用户优先将鼠标悬停在文本上（或单击按钮）之前，应隐藏文本元素。要隐藏的元素与代码块无关。目前我在

中包含文本

建议通过在每行前面加上“>！”来隐藏文本块，但 R Studio 无法识别这种“降价”方法。它只返回一个以“！”开头的文本块。不过，在 Javascript 和按钮之上，我更喜欢这种简单的“悬停”方法。

欢迎提出任何建议。谢谢。

【问题讨论】：

标签： r r-markdown knitr

【解决方案1】：

我的建议是使用 CSS 来完成这项任务。

以下Rmd 文件包含一些隐藏spoiler 类元素的规则。您可能会发现其他使用 CSS 的方法：

---
output: html_document
---

```{css, echo=FALSE}
.spoiler {
  visibility: hidden;
}

.spoiler::before {
  visibility: visible;
  content: "Spoiler alert! Hover me to see the answer."
}

.spoiler:hover {
  visibility: visible;
}

.spoiler:hover::before {
  display: none;
}
```

You can insert a message in raw `HTML`:
<p class="spoiler">Answer</p>

A better approach is to use bracketed spans:  
[This is another answer]{.spoiler}

【讨论】：

另外值得一提的是：fenced divs，它可以消除输入中对原始 HTML 的需要。

【解决方案2】：

基于想要显示kable'd 表的附加部分，我查看了htmltools 包中用于创建HTML 元素的一些函数。我想出的方法是通过js 代码块使用最少的Javascript。

基本上，我使用shiny::actionButton 创建一个按钮，并通过向onclick 属性提供一个函数名称来附加一个Javascript 点击处理程序。编织表位于 HTML 包装器内，以便它可以正确呈现，在 <div> 元素内作为容器。此容器的 hidden property 最初设置为 true。

点击处理程序是唯一真正要编写的 Javascript，它是一个按 ID 查找 <div> 并将其 hidden 属性设置为 false 的函数。

RMarkdown：

---
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

```{r}
library(htmltools)

shiny::actionButton("show_table_button", 
                    label = "Show table", 
                    onclick = "button_handler()")

div(id = "tableContainer", 
    hidden = "true",
    HTML(knitr::kable(head(iris), format = "html")))
```

```{js}
function button_handler() {
  document.getElementById('tableContainer').hidden = false;
}
```

创造：

点击按钮后：

请注意，还有一些其他包用于在 R 中编写更复杂的 Javascript 代码——没有使用任何推荐的包——但我试图将这些包限制在使用任何与 Shiny / HTML Widgets 相关的内容.

【讨论】：

如果您不想再看到它，有没有办法添加一个“隐藏表格”按钮来隐藏它？
老实说，我会尝试使用预构建的 HTML 小部件库而不是在 R 中编写 javascript，但您可以改为在点击处理程序中切换 document.getElementById('tableContainer').hidden

【解决方案3】：

这当然是可能的。有几种可能性，包括线性变换（动画渐变）、按钮、无按钮等等。

首先，这是一个使用 CSS 的简单方法。未悬停时，字体和背景颜色匹配，因此看不到任何文本。悬停时，背景变为白色，文本变为黑色。

---
title: "Hide Code Blocks"
author: "Martin Schmelzer"
date: "June 25, 2018"
output: html_document
---

<style>
hide {
  background-color: #d6d6d6;
  color: #d6d6d6;
}
hide:hover {
  background-color: white;
  color: black;
}
</style>

## R Markdown

<hide>This is a hidden text block!</hide>

【讨论】：