How to make “spoiler” text in github wiki pages?

Question

I'm trying to make text which is either invisible until moused over, or, has a "show" / "hide" button, or some other thing, so that it is not visible until the user interacts with it in some way.

I'm trying to do this on a github wiki page. (Specifically it's for a short self-quiz.)

Basically I want to get a similar effect to what SO achieves with the >! markup:

Hoho! Spoiler text!

as described in these meta posts.

The same markup doesn't work in github, I guess that it's an SO extension?

I saw this issue about using spoiler text in comments on github, which was closed, but I thought there might be a different answer for the wiki pages, or a different solution based on HTML or something?

Does anyone know if there's a way to do this, or if it is definitely unfortunately impossible?

Answer 1

The documentation for GitHub Flavored Markdown makes no mention of spoilers, so I suspect it's not supported. It's definitely not part of the original Markdown spec.

Answer 2

GFM supports a subset of HTML. For now, you can wrap your question in a <summary> and your answer in any standard HTML tag like <p> and wrap the whole thing in the <details> tag.

So if you do this

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

You get this -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

Browser support is an Issue.

The thing with GitHUB wiki is that it allows you write text in other formats like AsciiDoc, RST etc. Probabaly there's solution in those too. These are 2 formats that are far more feature rich than Markdown.

Answer 3

Building on Gaurav's answer and this GH issue here's a way to use advanced formatting inside the <details> tag on the 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>

Currently it renders as the following with the expected parts expandable and collapsible:

---

Initial state

---

Click on summary

---

Click on nested summary

Answer 4

The html element <details> and <summary> can do it, have a look:

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

Support is poor for Firefox & Edge, but there may be some pollyfills...

Answer 5

If editing the CSS is an option for you, you can simply use

[](#spoiler "Spoiler Filled Text")

and then use (pure) CSS to give the correct appearance.

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>

(Vaguely inspired from this code)