Ich versuche, Text zu erstellen , der entweder unsichtbar ist, bis er mit der Maus darüber bewegt wird , oder über eine Schaltfläche " Anzeigen " / " Ausblenden " oder eine andere Funktion verfügt, sodass er erst sichtbar wird, wenn der Benutzer auf irgendeine Weise mit ihm interagiert.

Ich versuche dies auf einer Github-Wiki-Seite zu tun. (Speziell für ein kurzes Selbstquiz.)

Grundsätzlich möchte ich einen ähnlichen Effekt erzielen wie SO mit dem >!Markup:

Hoho! Spoilertext!

wie in diesen Meta- Posts beschrieben.

Das gleiche Markup funktioniert nicht in Github, ich denke, dass es eine SO-Erweiterung ist?

Ich habe dieses Problem mit der Verwendung von Spoilertext in Kommentaren zu github gesehen, das geschlossen wurde, aber ich dachte, es gibt möglicherweise eine andere Antwort für die Wiki-Seiten oder eine andere Lösung basierend auf HTML oder so?

Weiß jemand, ob es einen Weg gibt, dies zu tun, oder ob es definitiv leider unmöglich ist?

In der Dokumentation zu GitHub Flavored Markdown werden Spoiler nicht erwähnt, daher vermute ich, dass dies nicht unterstützt wird. Es ist definitiv nicht Teil der ursprünglichen Markdown-Spezifikation .

GFM unterstützt eine Teilmenge von HTML. Im Moment können Sie Ihre Frage in ein <summary>und Ihre Antwort in ein beliebiges Standard-HTML-Tag wie <p>und das Ganze in das <details>Tag einschließen.

Also, wenn Sie das tun

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

Sie erhalten dies -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

Browserunterstützung ist ein Problem.

Die Sache mit dem GitHUB-Wiki ist, dass Sie damit Text in anderen Formaten wie AsciiDoc , RST usw. schreiben können. Wahrscheinlich gibt es auch in diesen Formaten eine Lösung. Dies sind zwei Formate, die weitaus umfangreicher sind als Markdown.

Aufbauend auf Gauravs Antwort und diesem GH-Problem können Sie hier die erweiterte Formatierung innerhalb des <details>Tags auf GitHub verwenden :

Hinweis: Die ursprüngliche Antwort von 2016 ist erforderlich <p>, da diese Anforderung seit 2017 eine leere Zeile nach </summary>(dh vor erweiterten Inhalten) ist. Irgendwann bis 2019 <summary>funktioniert der Abschlag in auch nicht mehr. Sie können sehen, dass es ziemlich schuppig ist, da es sich um einen Hack / Workaround handelt, nicht um eine unterstützte Funktion / einen unterstützten Anwendungsfall. Beachten Sie auch, dass Issue- / PR-Kommentare eine andere Formatierung unterstützen als Wikis (z. B. funktioniert der unterstrichene April 2020 nur im Wiki, nicht bei Issues).

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

Derzeit wird Folgendes wie folgt dargestellt, wobei die erwarteten Teile erweiterbar und zusammenklappbar sind:

Ausgangszustand

Klicken Sie auf Zusammenfassung

Klicken Sie auf verschachtelte Zusammenfassung

Das HTML-Element <details>und <summary>kann es tun, schauen Sie:

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

Die Unterstützung für Firefox & Edge ist schlecht, aber es kann einige Pollyfills geben ...

Wenn das Bearbeiten von CSSeine Option für Sie ist, können Sie es einfach verwenden

[](#spoiler "Spoiler Filled Text")

und dann (rein) verwenden CSS, um das richtige Erscheinungsbild zu erhalten.

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>

(Vage inspiriert von diesem Code )

Eine andere Lösung als die Details- / Zusammenfassungs-Tags, aber auch die Verwendung von nativem HTML, besteht darin, einen Bereich mit einem Titel zu verwenden. Ich habe kürzlich so etwas im org-Modus gemacht.