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?

Note: There were some quite useful comments showing alternate approaches to do this on a github isuses page here: https://github.com/github/markup/issues/411#issuecomment-176907678 — Chris Beck, Feb 04 '16 at 20:55

score 180 · Answer 1 · answered Oct 09 '15 at 08:11

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.

TWiStErRob · Answer 2 · 2020-04-12T17:39:28.017

Building on Gaurav's answer and this GH issue here's a way to use advanced formatting inside the <details> tag on GitHub:

Note: original answer from 2016 required <p>, since 2017 that requirement is an empty line after </summary> (i.e. before expanded contents). Somewhere along the line leading up to 2019, markdown in <summary> is not working any more either. You can see it's quite flaky as it's a hack/workaround, not a supported feature/use case. Also note that issue/PR comments support different formatting than Wikis (e.g. 2020 April underline in summary only works on Wiki, not on issues).

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

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

Initial state

Click on summary

Click on nested summary

Per [this GitHub comment](https://github.com/dear-github/dear-github/issues/166#issuecomment-322367328), make sure that there is a line between the `
` and the `\`\`\``. Otherwise this technique won't work. — Jade, May 20 '18 at 00:33
Any idea how to get a newline after this? When I try this technique it jams into the subsequent paragraph. (Without adding a
tag I mean) — Apollys supports Monica, May 22 '18 at 22:58
Well when I copypaste your exact answer code, it shows no formatting whatsoever. So something's wrong here — phil294, Apr 12 '20 at 16:47
@phil294 thanks for the alert, fixed. Sadly, this rots, so needs some adjustments as GitHub evolves. Added a note too, to point this out. — TWiStErRob, Apr 12 '20 at 17:35

ChrisGPT was on strike · Accepted Answer · 2022-10-19T10:39:03.923

39

Literal spoiler text as shown in the question is not supported in GitHub Flavored Markdown or the original Markdown implementation.

However Markdown supports inline HTML, and GitHub allows a subset of HTML tags to remain in the rendered output. As described in other answers, <details> works on GitHub.

If that's "spoilery" enough for you, feel free to use it.

edited Oct 19 '22 at 10:39

answered Sep 28 '15 at 01:16

ChrisGPT was on strike

127,765
105
273
257

1

Yeah... I was looking at this page, where it lists all the various markup formats they support. (It appears that they support them in wiki page editor also.) I went through the documentation of each briefly, the one I wasn't sure about was 'rst', the others didn't look too promising but maybe I missed something... atm I tend to think you are right. https://github.com/github/markup Best option might be to do it on a 'github pages' page which is linked to by the wiki or something? – Chris Beck Sep 28 '15 at 01:45

score 12 · Answer 4 · answered Oct 05 '15 at 16:45

12

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

answered Oct 05 '15 at 16:45

vicmontol

139
6

2

Although this is an interesting point, I feel like it should only be [a comment to another answer](http://stackoverflow.com/a/33033172/2657549) (which came later, I know). – Clément Jan 18 '17 at 05:40

score 5 · Answer 5 · answered Jan 18 '17 at 05:38

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)

score 4 · Answer 6 · answered Jun 12 '20 at 19:12

4

A different solution from the details / summary tags, but also using native html is to use a span with a title. I was doing something like this recently in org mode.

answered Jun 12 '20 at 19:12

L. Amber O'Hearn

198
1
5

How to make "spoiler" text in github wiki pages?

6 Answers6

Initial state

Click on summary

Click on nested summary

Linked