Как сделать текст "spoiler" в вики-страницах github?

Я пытаюсь сделать текст, который либо невидим, пока не замалчивается, либо имеет кнопку "показать" / "скрыть", либо какую-то другую вещь, чтобы она не была видна, пока пользователь не взаимодействует с ней в некоторых путь.

Я пытаюсь сделать это на странице wiki github. (В частности, это для краткой самокритики.)

В принципе, я хочу получить аналогичный эффект для того, что SO достигает с помощью разметки >!:

Хохо! Текст спойлера!

как описано в этих meta.

Такая же разметка не работает в github, я предполагаю, что это расширение SO?

Я видел эту проблему об использовании текста спойлера в комментариях к github, который был закрыт, но я думал, что может быть другой ответ для вики-страницы или другое решение на основе HTML или что-то еще?

Кто-нибудь знает, есть ли способ сделать это, или если это, к сожалению, невозможно?

Ответ 1

Документация для GitHub Flavored Markdown не упоминает о спойлерах, поэтому я подозреваю, что она не поддерживается. Это определенно не является частью оригинальной спецификации Markdown.

Ответ 2

GFM поддерживает подмножество HTML. Пока вы можете обернуть свой вопрос в <summary> и ваш ответ в любом стандартном теге HTML, таком как <p>, и обернуть все это в тег <details>.

Итак, если вы это сделаете

<details> 
  <summary>Q1: What is the best Language in the World? </summary>
   A1: JavaScript 
</details>

Вы получаете это → https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

Поддержка браузера - проблема.

Вещь с вики GitHUB заключается в том, что она позволяет вам писать текст в других форматах, таких как AsciiDoc, RST и т.д. Probabaly там тоже решение. Это 2 формата, которые намного более функциональны, чем Markdown.

Ответ 3

Основываясь на Gaurav answer и этот вопрос GH, здесь можно использовать расширенные форматирование внутри тега <details> в вики файле GitHub:

<details>
  <summary>stuff with *mark* **down**</summary>
  <p>
<!-- the above p cannot start right at the beginning of the line and is mandatory for everything else to work -->
##*formatted* **heading** with [a](link)
```java
code block
```

  <details>
    <summary><small>nested</small> stuff</summary><p>
<!-- alternative placement of p shown above -->

* list
* with

 1. nested
 1. items

    ```java
    // including code
    ```
 1. blocks

  </p></details>
</p></details>

В настоящее время он отображает следующее: ожидаемые части расширяемы и сворачиваются:

Начальное состояние

Нажмите на сводку

Нажмите на вложенную сводку

Ответ 4

Элемент html <details> и <summary> может это сделать, посмотрите:

http://caniuse.com/#search=details

Поддержка бедных для Firefox и Edge, но могут быть некоторые pollyfills...

Ответ 5

Если вы редактируете CSS, вы можете просто использовать

[](#spoiler "Spoiler Filled Text")

а затем используйте (чистый) CSS, чтобы получить правильный внешний вид.

a[href="#spoiler"] {
  text-decoration: none !important;
  cursor: default;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #FFF8DC;
  border-left: 2px solid #ffeb8e;
  display: inline-block;
}
a[href="#spoiler"]::after {
  content: attr(title);
  color: #FFF8DC;
  padding: 0 0.5em;
}
a[href="#spoiler"]:hover::after,
a[href="#spoiler"]:active::after {
  cursor: auto;
  color: black;
  transition: color .5s ease-in-out;
}

<p>
  <a href="#spoiler" title="Spoiler Filled Text"></a>
</p>