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

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

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

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

Хохо! Спойлер смс!

как описано в эти мета сообщения.

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

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

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

59
github github-flavored-markdown html

5 ответов

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

25

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 wiki в том, что он позволяет писать текст в других форматы, такие как AsciiDoc, первый etc. Вероятно, в них тоже есть решение. Это 2 формата, которые намного богаче функциями, чем Markdown.

90

дом на несмотря на это и этот вопрос GH вот способ использовать расширенное форматирование внутри <details> tag на GitHub wiki:

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

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

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

enter image description here

нажмите на резюме

enter image description here

нажмите на вложенное резюме

enter image description here

45

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

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

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

11

изменения CSS - Это вариант для вас, вы можете просто использовать 

[](#spoiler "Spoiler Filled Text")

а затем использовать (pure)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>

(смутно вдохновил код)

2