R Markdown:隐藏扰流文本(将鼠标悬停在文本元素上)

Question

是否可以在使用R Markdown创建的.html文件中隐藏文本块？应隐藏文本元素,直到用户优先悬停在文本上(或单击按钮).要隐藏的元素不涉及代码块.目前我在<p> </ p>中包含了文字

建议通过在每行前面加上'>!来隐藏文本块,但R Studio不会识别这种'降价'方法.它只返回一个以'!'开头的文本块.我更喜欢这种简单的"悬停"方法,高于Javascript和按钮.

欢迎大家提出意见.谢谢.

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

Answer 2

这当然是可能的.有几种可能性,包括线性变换(动画淡入淡出),按钮,无按钮等.

首先,这是一个使用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>

Answer 3

基于关于想要显示kable'd table' 的附加部分,我看了一下htmltools包中的一些函数来创建HTML元素.我提出的方式通过js代码块使用最少量的Javascript .

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

click处理程序是唯一要编写的真正的Javascript,这是一个查找<div>by ID 的函数,并将其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相关的内容.