Add markdown support for hidden-until-you-click text (aka spoilers)

Question

Use cases:

1. Programming puzzles. This way the answer can be posted the same time as the question, eliminating doubt that no answer is possible for hard questions and proving that the question is not a homework exercise (since the author already has the answer)

2. The socratic method. In your answer you can ask a leading question, and then once the reader has a guess they can click to reveal the answer.

---

EDIT: now that several new websites have been created through SE 2.0, this became much more important.

Websites such as gaming really need it.

Answer 1

This has been implemented.

The syntax is

>! Spoiler text

Example:

Moon languages rock!

From http://en.wiktionary.org/wiki/moon_language
Noun
moon language (plural moon languages)
1. (slang) Text written in an incomprehensible script, especially Japanese or Chinese.
_{(Multi-line spoilers need Markdown double-spaces to get a newline. Automatic lists, headings, et cetera are not supported.)}

This is not yet reflected in the preview pane.

Essentially, a blockquote where each line begins with a ! will be a spoiler.

Spoilers have the same text color as background color, but can be revealed by hovering over them (or selecting the text).

Answer 2

This is an old question, but I think it deserves another look with the large number of new stackexchange sites being created. In particular, the "spoiler" marker could be useful for its intended feature on the gaming (public beta) and sci-fi (52 committed) sites, and it would certainly be appreciated for uses similar to those mentioned in the original question on math.stackexchange (where those uses would be more common than they would be on stackoverflow proper).

In summary, I think bananakata and dbr's responses of "too narrow" are no longer true when the entire spectrum of SE2.0 sites is taken into consideration.

Answer 3

For the very narrow range of questions this would be useful for, couldn't spoilers simply be obfuscated using ROT13? It worked for newsgroups..

Another idea for a workaround, utilise the code-block overflow:auto property:

Spoiler -->                                                                                                  Not really, this is just an example

If a "proper" spoiler tag is to be implimented, I think the most important part of this is codinghorror's response:

isn't there a HTML tag that we could set a CSS style on to work this way?

..so is deciding on a markdown representation. For example, prefixing each line with "! ", the same way block-quotes use "> "

> This is a block quote,
> using current syntax

..but, the following is a spoiler!

! This is a spoiler,
! using a new syntax

The biggest problem with making a new "spoiler" syntax would be sites using the data-dump for whatever reason would have to implement it also.. Currently the posts are standard, nice and simple markdown, and I think it's better this way..

Answer 4

"Spoiler" tags would make the site seem kinda juvenile and unprofessional, IMHO. I think Wikipedia did away with their "spoiler warning" tag for the same reason.

Edit: 13 months ago, when I wrote the above, there was no StackExchange. I've changed my opinion now that SE sites are launching. I think for some of them it would make real sense. I still don't think it's necessary as a platform-wide feature (in particular, no need on SO proper), but on a few SE sites I think it is needed.

Answer 5

I want this feature because I post supplementary materials (code) in my questions on math.stackoverflow, which is useful to maybe 5% of the people who read my question, so I want to use something like "spoiler" to hide it by default.

Edit: Blogger calls it "expandable summary" and LiveJournal calls it "cut" and uses tag "lj-cut". Here's how it looks like on livejournal....anything between tags is hidden by default, and shown when you click "Read More". For stackoverflow we could have following syntax

<so-cut label="[Code]"> code </so-cut >

which replaces the content of the section with word "[Code]" that expands on click

Answer 6

I'm for this proposal. It might have a narrow focus but it's definitely useful and trivial to implement.

As for why rot13 is not an adequate solution, take this answer I gave to Project Euler #16 - C# 2.0 as case in point. I used rot13 on the answer and earnt 2-3 offensive (spam) votes plus a number of downvotes for my trouble.

Answer 7

I think even on SOFU this might be useful, for example to hide responses from commands. But then maybe "spoiler" needs a more generic name, like "more"?

Like to avoid my abuse of bold and <sub> here:

telnet gmail-smtp-in.l.google.com 25
Trying 74.125.79.27...
Connected to gmail-smtp-in.l.google.com.
Escape character is '^]'.
220 mx.google.com ESMTP p57si7771934eeh.86

helo example.com
250 mx.google.com at your service

mail from: <[email protected]>
250 2.1.0 OK p57si7771934eeh.86

rcpt to: <your-real-gmail-address@gmail>
250 2.1.5 OK p57si7771934eeh.86

...which could be shown more compact using the idea from Nick's comment:

It would be nice if the format could fall back on standard markdown if someone does not have this feature: e.g.,

> this is blockquote and
>! this is spoiler.

Parsers which don't understand spoilers will just show it as a blockquote with leading !.

This might then show some additional link:

[This post has some hidden information. Click here to show.]

telnet gmail-smtp-in.l.google.com 25
helo example.com
mail from: <[email protected]>
rcpt to: <your-real-gmail-address@gmail>

...when typed as:

    telnet gmail-smtp-in.l.google.com 25  
    ! Trying 74.125.79.27...  
    ! Connected to gmail-smtp-in.l.google.com.  
    ! Escape character is '^]'.  
    ! 220 mx.google.com ESMTP p57si7771934eeh.86

The above would expand all hidden text (for a specific post) using just one link, but it allows for easy copy/paste when things are not expanded/unhidden.

(One problem: 4 spaces for a code block followed by an exclamation mark for the spoiler, might interfere with true code blocks?)

Answer 8

Another consideration beyond using an existing html tag is that they won't want to fork too far away from the stock markdown implementation. The more SO drifts away the harder it will be to merge changes (in either direction). So if they can't push this into the core markdown syntax, it's probably not worth doing.

Answer 9

I think a better use case is when the OP indicates that they are learning about a technology and would like some ideas on how to go about doing it. In that case, it would be helpful to be able to hide a code sample so that the OP can read the answer, try it, then look at (or not) the code sample provided after they have tried their own solution or if they run into problems.

On questions like these it's sometimes difficult to know how much code to provide in your answer. You want to be complete so that other user's who find the question later and only want to know how to do it have a good answer, but you don't want to give everything away since the best way to learn is by doing. A way to hide part of your answer would be an ideal solution to this problem, allowing anyone who wants to see the code the ability to do so while hiding it from people who only want ideas on how to do their own solution while learning the technology.

Answer 10

Another option for adding spoilers would be to post it on a service such as TinyPaste and post a link to it. Anyone wanting to edit it could create a different post on there and edit the link.

Answer 11

This feature is simply not at all appropriate to the StackExchange platform.

Stack Overflow is a question and answer site. So you answer questions and people provide the answer. If you already know the answer, then it shouldn't be posted. Programming Puzzles and the Socratic method both (although awesome) are simply not the kind of questions that belong on the site.

How would you answer a question where the "< spoiler>" conceals the answer? Who gets upvoted? How does the best answer bubble to the top?

For the socratic method, aside from the fact that subjective questions are themselves inappropriate, it also doesn't make sense that you would be able to answer such questions when the socratic method is about continually asking deeper questions.

If necessary, users can post their own answers when they feel like it. But there is simply no need to have it baked into the question with a spoiler tag. It does not fit into the system.