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

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

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

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

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

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

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

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

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

5 59
github html github-flavored-markdown

5 ответов:

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

25

GFM поддерживает a подмножество 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")

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