Markdown Spoiler Hidden Text Syntax Tutorial

Markdown itself has no standard spoiler syntax — the CommonMark spec doesn't even mention the concept. But major social platforms have each built their own, and the syntaxes are mutually incompatible. This article walks you through the spoiler syntax for Discord, Reddit, Stack Exchange, Mastodon, and more, along with the gotchas I've run into in practice.

First, let's clear up a common confusion: spoilers and collapsible sections are not the same thing. A spoiler hides text behind a dark bar that you click or hover to reveal — the point is protecting readers from accidentally seeing something. Collapsible sections fold away large blocks of content to save space. If you want collapsible content, check out the Markdown Collapsible Content Tutorial — that one covers <details> / <summary> tags in depth.

Spoiler Syntax Quick Reference Table

Here's an overview so you can quickly find the syntax you need:

PlatformSyntaxTypeTrigger
Discord\|\|spoiler\|\|InlineClick to reveal
Reddit>!spoiler!<InlineClick to reveal
Stack Exchange>! spoilerBlockHover to reveal
MastodonCW (Content Warning)Whole messageClick to expand
HTML (universal)<details>BlockClick to expand

Notice the "Type" column — Discord and Reddit spoilers can be placed in the middle of a sentence to hide just a few words, while Stack Exchange spoilers must cover an entire block.

Discord Spoiler Syntax: ||Double Bars||

Basic Usage

Discord uses double bars || to wrap text for spoiler effects:

The ending is ||the main character was dead the whole time||, didn't see that coming.

Once sent, the text wrapped in || appears as a dark block. Other users need to click on it to see the content.

Practical Tips

Mark an entire message as spoiler: Type /spoiler at the beginning of your message, and the whole thing gets hidden:

/spoiler Major plot twist from Season 3 Episode 5

Images and links can be spoilers too: When uploading an attachment, click the eye icon on the top-right corner of the attachment to mark it as a spoiler. For links, just wrap the URL with ||:

||https://example.com/spoiler-image.png||

Mobile: On iOS, you can select text, long-press, and choose "Mark as Spoiler" from the context menu. On Android, you'll need to manually type the || syntax.

Honestly, Discord's spoiler system is the smoothest I've used. The syntax is short, it supports images, and mobile has quick actions — it's enough for daily chat. One thing to note: || inside code blocks won't be recognized as spoilers, as mentioned in the official docs.

Reddit Spoiler Syntax: >!Exclamation Marks!<

Basic Usage

Reddit uses >! at the start and !< at the end to mark inline spoilers:

The villain turns out to be >!the protagonist's father!<, a classic trope.

Common Pitfalls

Reddit's spoiler syntax has a few gotchas. I messed up several times when I first started using it:

1. No spaces around the markers

❌ >! spoiler text !<    (spaces between ! and text — won't work)
✅ >!spoiler text!<      (no spaces — works correctly)

I've fallen into this trap — my finger slipped on mobile, added an extra space, and the spoiler didn't hide anything. The spoiler was broadcast to the entire discussion. Always double-check for stray spaces after typing.

2. Line breaks break spoilers

Reddit's >!...!< is inline only — it can't span multiple lines. If you need multi-line spoilers, you'll have to split them into separate >!...!< markers or repeat the syntax on each line.

3. Not all subreddits support it

Some older subreddits haven't enabled spoiler CSS, so your >!...!< might display as plain text. It's a good idea to send a test message first.

Stack Exchange Spoiler Syntax: >! Block Masking

Basic Usage

Stack Exchange sites (Stack Overflow and the entire network) use >! at the start of a line for block-level spoilers:

>! The answer is 42.
>! Second line of spoiler content.

This syntax borrows Markdown's blockquote syntax > with an added !. When rendered, the text color matches the background color — hovering (or tapping on mobile) reveals the content.

Multi-line Rules

Stack Exchange spoilers require every line to start with >!. If any line is missing it, that line won't be hidden:

>! First line of spoiler
>! Second line of spoiler
This line won't be hidden! Because there's no >! prefix

Also, if a blank line appears in the spoiler block (just > without !), the entire block loses its spoiler effect. Stack Exchange developer Kevin Montrose explicitly explained this rule on Meta.

Limitations

Stack Exchange spoilers are block-level — you can't hide just a few words in the middle of a paragraph. And the implementation uses matching text and background colors, not true hiding — you can see the content by selecting the text. Also, images inside spoiler blocks sometimes can't be hidden, which is a known issue.

Mastodon Content Warning (CW)

Mastodon takes a different approach. There's no special Markdown spoiler syntax — instead, it provides a Content Warning (CW) field when composing a post.

How to Use

  1. While composing a message, click the CW button below the text input
  2. Enter a warning (e.g., "Spoiler: movie ending")
  3. Write the actual content in the text area below

After posting, other users see the warning text first and need to click "Show more" to reveal the full content.

Characteristics

CW has nothing to do with Markdown syntax — it's purely a platform feature. The upside is the entire message is protected; the downside is you can't hide just part of a message. It's more like labeling a post as "this content might be uncomfortable" — it's used more broadly than pure spoilers. Some people use it to hide long posts, sensitive content, or text they don't want appearing directly in someone's timeline.

Spoiler Solutions for Other Platforms

Obsidian Notes

Obsidian has several community plugins that support spoilers:

  • Inline spoilers: Uses Discord-style ||spoiler|| syntax
  • Spoiler Block: Provides a dedicated spoiler block syntax
  • Extended Markdown Syntax: Supports spoilers, highlights, and other extensions via custom delimiters

Search for "spoiler" in the Obsidian community plugin marketplace to find these.

HTML Universal Solution (details/summary)

If you need spoiler-like effects on GitHub, GitLab, or your own blog, HTML <details> / <summary> tags are the most universal option. Strictly speaking, this is "collapsing" rather than "spoiling" — content is collapsed by default and expands on click, rather than being hidden behind a dark bar. For full details, see the Markdown Collapsible Content Tutorial.

Quick example:

<details>
  <summary>Click to reveal spoiler</summary>

  Hidden content goes here.

</details>

CSS Custom Solution

On websites you control, you can implement a true "dark bar" spoiler effect with CSS:

.spoiler {
  background-color: black;
  color: black;
}
.spoiler:hover {
  color: white;
}
<span class="spoiler">Hidden spoiler content</span>

When you hover, the text turns white and becomes visible. This approach works in R Markdown, Hugo, and other static site generators.

Spoiler Not Working? Common Troubleshooting

Syntax Looks Correct But Nothing Is Hidden

  • Check for spaces: Reddit's >! and !< must be right against the text
  • Check if you're inside a code block: || inside Discord code blocks won't trigger spoilers
  • Check platform support: Standard Markdown parsers don't recognize any spoiler syntax

Cross-Platform Issues

These spoiler syntaxes are all platform-specific extensions — they're mutually incompatible:

  • Discord's ||spoiler|| posted to Reddit shows as plain text
  • Reddit's >!spoiler!< posted to Discord also displays as-is
  • Stack Exchange's >! on other platforms gets treated as a blockquote

So before using a spoiler syntax, confirm which platform you're on and use the appropriate one.

References