R Markdown: скрыть текст спойлера (навести курсор на текстовый элемент) - PullRequest
Новая
       9

R Markdown: скрыть текст спойлера (навести курсор на текстовый элемент)

0 голосов
/ 25 июня 2018

Можно ли скрыть блоки текста в файлах .html, созданных с помощью R Markdown? Элементы текста должны быть скрыты до тех пор, пока пользователь не наведет указатель мыши на текст (или не нажмет кнопку). Скрываемые элементы не относятся к блокам кода. В настоящее время я включаю текст в

Было предложено скрыть текстовые блоки, предшествуя каждой строке '>!', Но R Studio не распознает этот подход 'уценки'. Он просто возвращает текстовый блок, который начинается с «!». Я предпочитаю этот простой подход «зависания», а не Javascript и кнопки.

Любые предложения приветствуются. Спасибо.

Ответы [ 3 ]

0 голосов
/ 25 июня 2018

Я предлагаю использовать 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}
0 голосов
/ 11 ноября 2018

Основываясь на дополнительной части о желании открыть таблицу kable, я взглянул на некоторые функции из пакета htmltools для создания элементов HTML. То, как я придумал, использует наименьшее количество Javascript через кодовый блок js.

Обычно я создаю кнопку с помощью shiny::actionButton и присоединяю к ней обработчик щелчков Javascript, предоставляя имя функции атрибуту onclick. Таблица вязания находится внутри оболочки HTML, поэтому она будет правильно отображаться внутри элемента <div> как контейнера. Этот контейнер имеет свойство hidden , изначально установленное в значение true.

Обработчик кликов - это единственный настоящий Javascript, который можно написать, и это функция, которая находит <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;
}
```

Это создает:

hidden = true

После нажатия кнопки:

hidden = false

Обратите внимание, что есть некоторые другие пакеты для написания более сложного кода Javascript в R - я не использовал ни одного, чтобы рекомендовать его, - но я пытался ограничить пакеты тем, что вы уже имели, от использования всего, что связано с блестящими / HTML-виджетами .

0 голосов
/ 25 июня 2018

Это, конечно, возможно.Существует несколько возможностей, в том числе линейные преобразования (анимированное затухание), кнопки, отсутствие кнопок и т. Д.

Для начала приведем простой подход с использованием 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>
...