share
Meta Stack OverflowAdd markdown support for hidden-until-you-click text (aka spoilers)
[+95] [11] Joel Coehoorn
[2009-06-30 15:53:42]
[ feature-request status-completed markdown ]
[ http://meta.stackoverflow.com/questions/1191/add-markdown-support-for-hidden-until-you-click-text-aka-spoilers ] [DELETED]

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 [1] really need it.

(1) seems kind of narrow... - bananakata
(2) TV Tropes (not productivity safe) has a feature like this. - Andrew Grimm
(14) This seems a highly requested thing for the Gaming.SE site - Ivo Flipse
(5) rpg.se would like this as well. - bifflechips
(5) As long as this is not implemented: ¿dlǝɥ ʇɥƃıɯ uʍop ǝpısdn ƃuıdʎʇ Ppfpff, fppmfpmmmfmp mmmmmpppffmffmp Pmpmppppppppffmfmmpfmmppmmmpmp? - Arjan
(1) +1 for RPG.SE - This is quite nearly a must for us. - Iszi
"Spoilers" also are really useful to include looong text blocks, in order to save space. This is often better than relying exclusively on a third service such as pastebin or a personal blog. Third parties can go off or remove content, then we end up with dead links. Such a shame. Please do implement a collapsing spoiler tag one. - JeromeJ
[+63] [2010-12-03 02:16:44] Kevin Montrose

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 [1] 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).

[1] http://meta.stackoverflow.com/questions/26011/should-the-markdown-renderer-treat-a-single-line-break-as-br

(1) @rchern - selecting the text also works. - Kevin Montrose
(13) Awesome, but I think there should be some delay before it is revealed. The reader may not want to see it until they've had time to process the surrounding text and merely touching it defeats that. Perhaps after 1 second of hovering? - Jeff Mercado
(24) It also seems like there should be some kind of indication that the block actually is a spoiler, in case one really wants to avoid the spoiling. Maybe a little visible "spoiler" text in the bottom corner, or watermarked in the back? - Mark Rushakoff
(9) It'd be nice if there was a text overlay saying something akin to "This is a spoiler, mouse over to reveal." - Esko
(1) Embedded links and the revisions like meta.stackoverflow.com/posts/71396/revisions look funny! - Arjan
(6) I think collapsing would be better for loooong spoilers? As the JavaScript in my earlier comment messed with the layout, another try with some more spaces. Just copy and paste into the location bar as an example. Note that WebKit might complain "Refused to execute a JavaScript script. Source code of script found within request." When seeing that, just change the JavaScript a bit before pasting: javascript:$(".spoiler").before("<sub>Click below to show/hide details</sub>").children().hide(); $(".spoiler").click(function(){ $(this).children().toggle(); }) - Arjan
(3) I just want to join Mark and Esko - this is great but some sort of message is really important, otherwise it looks like a badly-formatted answer on first glance - especially for users unfamiliar with SE sites, the kind of users we also cater for and try to draw. I think having some sort of "SPOILER - hover over this to reveal text" message is important. If this is technically too difficult, maybe just add it as a small-font red message just above the block. - Oak
Aha, you silently fixed the preview and the CSS too. Nice! - Arjan
1
[+45] [2010-08-07 01:32:52] Larry Wang

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.


2
[+17] [2009-06-30 16:45:21] dbr

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


I like the suggested workaround for the rare case where this is desired. - Kip
(9) 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 !. - Nick
(2) +1 for the overflow: auto suggestion, but -1 for the ROT13 suggestion. - Pops
(1) Does anyone have a program that automatically fixes ROT13 anymore? I think Outlook Express did it, but nothing else comes to mind. As for the overflow:auto, that's a lot clumsier than just having hover-to-reveal. - Kyralessa
(1) Please keep in mind a lot of the SEs have non-computer-geek types that have no idea what ROT13 is. - mxyzplk
That first spoiler is actually just an example. Ahahaha! - detly
3
[+11] [2009-06-30 16:36:08] Kip

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


-1 this wouldn't be like a warning, it'd be more like the spoiler space in TV Tropes where text is invisible until you make it visible. - Andrew Grimm
(2) @Andrew FYI I've edited my answer, as my opinion has changed now that SE sites are launching left and right. - Kip
(4) +1 'cause of the edit - Pops
4
[+8] [2010-08-27 03:26:26] Yaroslav Bulatov

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 [1] 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

[1] http://yaroslavvb.livejournal.com/2008/10/07/

(1) In another question you suggest changing the name from 'spoiler' to something else, I think it may be a good idea, perhaps it should be considered. - jmfsg
I'd prefer if it was expanding using jquery (not javascript of course), but I like the concept - jmfsg
I'm wanting something like this for this answer, where the Standard quotes are interesting to some people but detract from the readability of the overall answer. - Ben Voigt
5
[+5] [2009-07-13 22:44:48] cletus

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 [1] 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.

[1] http://stackoverflow.com/questions/677579/project-euler-16-c-2-0/677616#677616

6
[+3] [2009-06-30 18:09:38] Joel Coehoorn

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.


7
[+2] [2010-11-07 13:32:53] Arjan

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 [1]:

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: <me@example.com>
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 [2]:

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: <me@example.com>
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?)

[1] http://superuser.com/questions/207926/if-to-and-from-headers-are-the-spammers-email-address-how-did-i-get-this-em/208156#208156
[2] http://meta.stackoverflow.com/questions/1191/add-a-spoiler-tag-that-makes-hidden-until-you-click-text#comment-9333

8
[+1] [2010-08-26 20:18:16] devinb

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.


(10) What about on a gaming site? I'm under the impression rpg.stackexchange and gaming.stackexchange are watching this question with hungry eyes. - Richard JP Le Guen
@Richard I would actually consider the gaming/rpg sites to be special exceptions. Give me some time to consider them, if you'd be so kind. - devinb
@Richard The only thing I support about the < spoiler> tag in that case is to keep things off the front page. On a Q & A site, the spoiler tag doesn't really make much sense, because you need to know the entirety of the question in order to formulate the best possible answer. However, the problem with RPG/Gaming is that some people might recieve information on the front page that they don't want to. And we need some way to stop that. But in general, I'd say that it is an issue that those sites need to deal with on their own, because (especially for RPGs) everything after the first - devinb
@Richard ... five minutes is probably a spoiler. This means you'd have a site which consists almost entirely of spoiler tags, and would have no content allowed to be shown on the front page. This means that it's not as simply as creating a special markup tag and putting the issue to rest. - devinb
@Richard, Although I can once again see other sites where this may be an issue (movies, literature) it is a systemic problem that involves the way the site is structures. I don't think a spoiler tag would help. - devinb
@devinb - I can respect that position; on rpg.stackexchange we've discussed putting it in the FAQ that the site is a spoiler-zone, just to be clear. - Richard JP Le Guen
@Richard, I can think of a few fairly difficult to implement suggestions. They'd also be rather cumbersome. Basically, you can't really have a site of that nature without spoilers. Any time you ask "How do I use <blah>'s special move?" it's a spoiler if that character isn't in your initial party. But that title is completely accurate, and can't really be anonymized without making it a useless title. - devinb
@Richard, doing something like UHS would be cool, but it already exists. - devinb
9
[0] [2009-10-31 13:42:51] tvanfosson

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 [1] 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.

[1] http://stackoverflow.com/questions/1654287/simple-upload-download-form-in-asp-net-mvc/1654337#1654337

10
[0] [2010-08-31 19:53:37] Gelatin

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

[1] http://pastebin.com/

11