Próbuję utworzyć tekst, który jest niewidoczny do momentu najechania na niego kursorem myszy , ma przycisk „pokaż” / „ukryj” lub coś innego, tak aby nie był widoczny, dopóki użytkownik nie wejdzie z nim w jakąś interakcję.

Próbuję to zrobić na stronie wiki github. (W szczególności służy do krótkiego samodzielnego quizu).

Zasadniczo chcę uzyskać podobny efekt do tego, co SO osiąga ze >!znacznikami:

Hoho! Tekst spoilera!

jak opisano w tych meta postach.

Ten sam znacznik nie działa w github, myślę, że jest to rozszerzenie SO?

Widziałem ten problem dotyczący używania tekstu spoilera w komentarzach na githubie, który został zamknięty, ale pomyślałem, że może być inna odpowiedź dla stron wiki lub inne rozwiązanie oparte na HTML czy coś?

Czy ktoś wie, czy jest na to sposób, czy też jest to zdecydowanie niestety niemożliwe?

Dokumentacja GitHub Aromatyzowane cenowych nie wspomina o spoilery, więc podejrzewam, że to nie jest obsługiwany. Na pewno nie jest to część oryginalnej specyfikacji Markdown .

GFM obsługuje podzbiór HTML. Na razie możesz zawrzeć swoje pytanie w a, <summary>a odpowiedź w dowolnym standardowym tagu HTML, na przykład <p>i zawinąć całość w <details>tag.

Więc jeśli to zrobisz

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

Dostajesz to -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

Obsługa przeglądarek jest problemem.

Problem z wiki GitHUB polega na tym, że pozwala na pisanie tekstu w innych formatach, takich jak AsciiDoc , RST itp. Prawdopodobnie w tych też jest rozwiązanie. Są to 2 formaty, które są znacznie bardziej bogate w funkcje niż Markdown.

Opierając się na odpowiedzi Gaurav i tym problemie z GH, oto sposób na użycie zaawansowanego formatowania wewnątrz <details>tagu w GitHub :

Uwaga: wymagana jest oryginalna odpowiedź z 2016 r. <p>, Od 2017 r. Tym wymaganiem jest pusty wiersz po </summary>(tj. Przed rozszerzoną treścią). Gdzieś na linii prowadzącej do 2019 r. Przecena już <summary>nie działa. Możesz zobaczyć, że jest to dość niestabilne, ponieważ jest to hack / obejście, a nie obsługiwana funkcja / przypadek użycia. Należy również pamiętać, że komentarze do wydania / PR obsługują inne formatowanie niż Wiki (np. Podkreślenie kwietnia 2020 r. W podsumowaniu działa tylko na Wiki, a nie w kwestiach).

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

Obecnie renderuje się następująco z oczekiwanymi częściami, które można rozwijać i zwijać:

Stan początkowy

Kliknij podsumowanie

Kliknij zagnieżdżone podsumowanie

Element html <details>i <summary>można to zrobić, spójrz:

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

Wsparcie jest słabe dla Firefox i Edge, ale mogą występować pollyfills ...

Jeśli edytowanie CSSjest dla Ciebie opcją, możesz po prostu użyć

[](#spoiler "Spoiler Filled Text")

a następnie użyj (czystego), CSSaby nadać prawidłowy wygląd.

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>

(Nieco zainspirowany tym kodem )

Innym rozwiązaniem od tagów detali / podsumowań, ale także natywnego html jest użycie zakresu z tytułem. Ostatnio robiłem coś takiego w trybie org.