Estoy tratando de hacer un texto que sea invisible hasta que se pasa el mouse sobre él , o que tenga un botón "mostrar" / "ocultar" , o alguna otra cosa, de modo que no sea visible hasta que el usuario interactúe con él de alguna manera.

Estoy tratando de hacer esto en una página wiki de github. (Específicamente, es para una breve autoevaluación).

Básicamente, quiero obtener un efecto similar al que SO logra con el >!marcado:

¡Hoho! ¡Texto spoiler!

como se describe en estas meta publicaciones.

El mismo marcado no funciona en github, ¿supongo que es una extensión SO?

Vi este problema sobre el uso de texto de spoiler en los comentarios en github, que estaba cerrado, pero pensé que podría haber una respuesta diferente para las páginas wiki, o una solución diferente basada en HTML o algo así.

¿Alguien sabe si hay una manera de hacer esto, o si definitivamente es imposible?

La documentación de GitHub Flavored Markdown no menciona spoilers, por lo que sospecho que no es compatible. Definitivamente no es parte de la especificación Markdown original .

GFM admite un subconjunto de HTML. Por ahora, puede envolver su pregunta en una <summary>y su respuesta en cualquier etiqueta HTML estándar como <p>y envolver todo en la <details>etiqueta.

Entonces, si haces esto

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

Obtienes esto -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

La compatibilidad con el navegador es un problema.

Lo que pasa con el wiki de GitHUB es que te permite escribir texto en otros formatos como AsciiDoc , RST , etc. Probablemente también haya una solución en ellos. Estos son 2 formatos que son mucho más ricos en funciones que Markdown.

Sobre la base de la respuesta de Gaurav y este problema de GH, aquí hay una forma de usar el formato avanzado dentro de la <details>etiqueta en GitHub :

Nota: se requiere la respuesta original de 2016 <p>, desde 2017 ese requisito es una línea vacía después </summary>(es decir, antes del contenido expandido). En algún lugar de la línea que conduce a 2019, la rebaja <summary>tampoco funciona. Puede ver que es bastante inestable, ya que es un truco / solución alternativa, no una función / caso de uso compatible. También tenga en cuenta que los comentarios de problemas / relaciones públicas admiten un formato diferente al de los wikis (por ejemplo, el subrayado de abril de 2020 en resumen solo funciona en Wiki, no en los problemas).

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

Actualmente se presenta como el siguiente con las partes esperadas expandibles y plegables:

Estado inicial

Haga clic en resumen

Haga clic en el resumen anidado

El elemento html <details>y <summary>puedes hacerlo, echa un vistazo:

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

El soporte es deficiente para Firefox y Edge, pero puede haber algunos pollyfills ...

Si editar el CSSes una opción para usted, simplemente puede usar

[](#spoiler "Spoiler Filled Text")

y luego use (puro) CSSpara dar la apariencia correcta.

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>

(Vagamente inspirado en este código )

Una solución diferente de las etiquetas de detalles / resumen, pero también usando html nativo es usar un intervalo con un título. Estaba haciendo algo como esto recientemente en modo org.