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

Я намагаюся зробити це на вікі-сторінці github. (Зокрема, це для короткої самостійної вікторини.)

В основному я хочу отримати ефект, подібний до того, що SO досягає >!розміткою:

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

як описано в цих мета публікаціях.

Ця ж розмітка не працює в github, я думаю, це розширення SO?

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

Хтось знає, чи є спосіб зробити це, чи це, безумовно, на жаль неможливо?

У документації для GitHub Flavored Markdown не згадується про спойлери, тому я підозрюю, що він не підтримується. Це точно не є частиною оригінальних специфікацій Markdown .

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 , RST тощо. Probabaly теж має рішення. Це 2 формати, які набагато більше функцій, ніж Markdown.

Спираючись на відповідь Гаурава та цю проблему GH, ось спосіб використовувати розширене форматування всередині <details>тегу на GitHub :

Примітка: потрібна оригінальна відповідь 2016 року <p>, з 2017 року ця вимога - це порожній рядок після </summary>(тобто перед розширеним вмістом). Десь уздовж лінії, що веде до 2019 року, знижка на прибуток теж <summary>вже не працює. Ви бачите, що це досить нестабільно, оскільки це хакерство / обхідний шлях, а не підтримувана функція / варіант використання. Також зауважте, що коментарі до випусків / PR підтримують форматування, що відрізняється від формату Вікі (наприклад, підкреслення квітня 2020 р. У резюме працює лише на Wiki, а не з питань).

<details>
  <summary>stuff with *mark* **down** in `summary` doesn't work any more, use HTML <i>italics</i> and <b>bold</b> instead in <code>&lt;summary&gt;</code> (<i>click to expand</i>)</summary>
  <!-- have to be followed by an empty line! -->

## *formatted* **heading** with [a](link)
```java
code block
```

  <details>
    <summary><u>nested</u> <b>stuff</b> (<i>click to expand</i>)</summary>
    <!-- have to be followed by an empty line! -->

A bit more than normal indentation is necessary to get the nesting correct,
 1. list
 1. with
    1. nested
    1. items
        ```java
        // including code
        ```
    1. blocks
 1. and continued non-nested

  </details>
</details>

В даний час він виглядає наступним чином із очікуваними деталями, що розширюються та складаються:

Початковий стан

Клацніть на резюме

Клацніть на вкладений підсумок

Елемент html <details>та<summary> може це зробити, подивіться:

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

Підтримка Firefox & Edge погана, але можуть бути деякі забруднення ...

Якщо редагування 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>

(Нечітко натхненний цим кодом )

Різне рішення від тегів деталей / підсумків, але також використання рідного html - це використання інтервалу з заголовком. Я робив щось подібне нещодавно в організаційному режимі.