web-dev-qa-db-fra.com

Comment créer du texte "spoiler" dans les pages wiki de github?

J'essaie de rendre le texte qui est invisible jusqu'à ce que la souris passe sur , ou, présente un "spectacle"/bouton "hide" , ou quelque chose d'autre, de sorte qu'il ne soit visible que lorsque l'utilisateur interagit avec celui-ci.

J'essaie de faire cela sur une page wiki de github. (Plus précisément, c'est pour un court auto-quiz.)

En gros, je veux obtenir un effet similaire à ce que SO obtient avec le >! balisage:

Hoho! Texte spoiler!

comme décrit dans ceux-ciméta posts.

Le même balisage ne fonctionne pas dans github, je suppose que c'est une extension SO?

J'ai vu ce problème comment utiliser du texte spoiler dans des commentaires sur github, qui était fermé, mais je pensais qu'il pourrait y avoir un autre répondre pour les pages wiki, ou une solution différente basée sur HTML ou quelque chose?

Est-ce que quelqu'un sait s'il y a un moyen de faire cela, ou si c'est malheureusement malheureusement impossible?

htmlgithubgithub-flavored-markdown
68
Chris Beck

Le documentation pour GitHub Flavored Markdown ne fait aucune mention des spoilers, donc je suppose que ce n'est pas supporté. Cela ne fait définitivement pas partie de la spécification Markdown originale .

26
Chris

GFM prend en charge un sous-ensemble de HTML. Pour l'instant, vous pouvez envelopper votre question dans un <summary> et votre réponse dans n’importe quelle balise HTML standard comme <p> et envelopper le tout dans le <details> tag.

Donc si tu fais ça

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

Vous obtenez ceci -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

La prise en charge du navigateur est un problème.

Le problème avec GitHUB wiki est qu’il vous permet d’écrire du texte dans d’autres formats tels que AsciiDoc , [~ # ~] rst [~ # ~] etc. Il y a probablement une solution dans ces cas aussi. Ce sont 2 formats qui sont beaucoup plus riches en fonctionnalités que Markdown.

118
Gaurav Ramanan

En vous appuyant sur réponse de Gaurav et ce problème de GH , voici un moyen d'utiliser le formatage avancé dans la balise <details> sur le GitHub. wiki :

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

Actuellement, il apparaît comme suit avec les parties attendues extensibles et réductibles:

Etat initial

enter image description here

Cliquez sur le résumé

enter image description here

Cliquez sur le résumé imbriqué

enter image description here

59
TWiStErRob

L'élément html <details> et <summary> peut le faire, regardez:

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

La prise en charge de Firefox et Edge est médiocre, mais il peut y avoir des remplissages polly ...

11
vicmontol

Si éditer le CSS est une option pour vous, vous pouvez simplement utiliser

[](#spoiler "Spoiler Filled Text")

puis utilisez (pure) CSS pour donner l’apparence correcte.

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>

(Vaguement inspiré de ce code )

3
Clément