¿Cómo hacer texto "spoiler" en páginas wiki de github?

81

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?

Chris Beck
fuente
Nota: Hubo algunos comentarios bastante útiles que muestran enfoques alternativos para hacer esto en una página de usos de github aquí: github.com/github/markup/issues/411#issuecomment-176907678
Chris Beck

Respuestas:

29

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 .

Chris
fuente
Sí ... estaba mirando esta página, donde se enumeran todos los formatos de marcado que admiten. (Parece que también los apoyan en el editor de páginas wiki.) Revisé brevemente la documentación de cada uno, el que no estaba seguro era el 'primero', los otros no parecían muy prometedores, pero tal vez me perdí algo. .. atm tiendo a pensar que tienes razón. github.com/github/markup ¿La mejor opción podría ser hacerlo en una página de 'páginas de github' que está vinculada por la wiki o algo así?
Chris Beck
142

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.

Gaurav Ramanan
fuente
74

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

ingrese la descripción de la imagen aquí


Haga clic en resumen

ingrese la descripción de la imagen aquí


Haga clic en el resumen anidado

ingrese la descripción de la imagen aquí

TWiStErRob
fuente
8
Según este comentario de GitHub , asegúrese de que haya una línea entre el <p>y el ```. De lo contrario, esta técnica no funcionará.
Benjamin
¿Alguna idea de cómo obtener una nueva línea después de esto? Cuando intento esta técnica, se atasca en el párrafo siguiente. (Me refiero sin agregar una etiqueta <br/>)
Apollys apoya a Monica
Bueno, cuando copio y pego su código de respuesta exacto, no muestra ningún formato. Entonces, algo anda mal aquí
phil294
1
@ phil294 gracias por la alerta, arreglado. Lamentablemente, esto se pudre, por lo que necesita algunos ajustes a medida que GitHub evoluciona. También se agregó una nota para señalar esto.
TWiStErRob
11

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

vicmontol
fuente
1
Aunque este es un punto interesante, siento que solo debería ser un comentario a otra respuesta (que vino más tarde, lo sé).
Clément
4

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 )

Clemente
fuente
1

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.

texto crudo

resultado

L. Amber O'Hearn
fuente