html - examples - ¿Cómo hacer un texto "spoiler" en las páginas wiki de github?
markdown underline (5)
El elemento html
<details>
y
<summary>
pueden hacerlo, eche un vistazo:
http://caniuse.com/#search=details
El soporte es pobre para Firefox y Edge, pero puede haber algunos pollyfills ...
Estoy tratando de hacer un texto que sea invisible hasta que se mueva el mouse , o que tenga un botón "mostrar" / "ocultar" , o alguna otra cosa, para 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 un breve autoexamen).
Básicamente, quiero obtener un efecto similar a lo que SO logra con
>!
margen:
Hoho Texto de spoiler!
como se describe en these 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?
GFM admite un
subconjunto
de HTML.
Por ahora, puede envolver su pregunta en un
<summary>
y su respuesta en cualquier etiqueta HTML estándar como
<p>
y envolver todo en la etiqueta
<details>
.
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
El soporte del navegador es un problema.
Lo que ocurre con el wiki de GitHUB es que te permite escribir texto en otros formatos como AsciiDoc , RST , etc. Probablemente, también hay solución en esos. Estos son 2 formatos que tienen muchas más funciones que Markdown.
La documentación de GitHub Flavored Markdown no menciona los spoilers, por lo que sospecho que no es compatible. Definitivamente no es parte de la especificación original de Markdown .
Si editar el
CSS
es una opción para usted, simplemente puede usar
[](#spoiler "Spoiler Filled Text")
y luego use
CSS
(puro) para 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 )
Sobre la base de
la respuesta de Gaurav
y
este problema de GH,
aquí hay una forma de utilizar el formato avanzado dentro de la etiqueta
<details>
en el wiki de GitHub
:
<details>
<summary>stuff with *mark* **down**</summary>
<p>
<!-- the above p cannot start right at the beginning of the line and is mandatory for everything else to work -->
##*formatted* **heading** with [a](link)
```java
code block
```
<details>
<summary><small>nested</small> stuff</summary><p>
<!-- alternative placement of p shown above -->
* list
* with
1. nested
1. items
```java
// including code
```
1. blocks
</p></details>
</p></details>
Actualmente se presenta de la siguiente manera con las partes esperadas expandibles y plegables:
