How to make "spoiler" text in github wiki pages?
HtmlGithubGithub Flavored-MarkdownHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
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.
Solution 2 - Html
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><summary></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
Solution 3 - Html
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.
Solution 4 - Html
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...
Solution 5 - Html
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)