Inline Spoilers

Hide text with a blur effect that reveals on hover or click (Discord-style)

Inline Spoilers

The spoiler extension creates inline blurred text that reveals on hover or click - similar to Discord's spoiler feature. Perfect for hiding answers, plot spoilers, or sensitive information within a sentence.

Basic Syntax

Wrap text in double pipes || to create a spoiler:

The answer is ||42||.
Markdown

Result: The answer is 42.

Examples

Quiz Answers

Hide answers inline with questions:

What is the capital of France? The answer is Paris.

What does CSS stand for? Cascading Style Sheets.

What year did World War II end? 1945.

Plot Spoilers

Hide story spoilers in discussions:

In the movie, the twist is that the main character was dead all along.

The book ends with the hero sacrificing themselves to save everyone.

Code Answers

Hide inline code solutions:

To reverse a string in Python, use `str[::-1]`.

The missing CSS property is `display: flex`.

Sensitive Information

Hide potentially sensitive content:

The password hint is first pet's name.

The secret code is ALPHA-7749.

Multiple Spoilers

You can have multiple spoilers in the same paragraph:

The first answer is correct, but the second one is wrong.

How It Works

  • Hidden state: Text is blurred and background colored
  • Hover: Move mouse over to reveal
  • Click/Focus: Click or tab to reveal (keyboard accessible)
  • Print: Spoilers are automatically revealed when printing

Styling

The spoiler uses a blur filter effect:

State Appearance
Hidden Blurred text, gray background
Revealed (hover/focus) Clear text, light background

Accessibility

Spoilers are fully accessible:

  • Keyboard navigation: Tab to focus, content reveals
  • Screen readers: Includes aria-label describing the spoiler
  • Reduced motion: Respects prefers-reduced-motion setting
  • Print: Always revealed in print output

Use Cases

Educational Content

Practice Question: What is 7 × 8? Answer: 56

Fill in the blank: The map() function returns a new array.

Interactive Learning

Try to answer before revealing:

  1. What HTML tag creates a paragraph? `<p>`
  2. What CSS property changes text color? `color`
  3. What JavaScript method adds to an array? `push()`

Documentation

Hide advanced details inline:

The function accepts an optional third parameter which enables debug mode.

Comparison with Details

Feature Spoiler ||text|| Details :::details
Type Inline Block
Best for Short text, answers Long content, sections
Reveal Hover/click Click to expand
Effect Blur Collapse/expand

Use spoilers for inline text within sentences. Use details for collapsible blocks of content.

Syntax Reference

||spoiler text||
Markdown
  • Wrap text in double pipes ||
  • Works inline with other text
  • Cannot span multiple lines
  • Cannot contain block elements (use details for that)

Tips

  1. Keep it short - Spoilers work best for single words or short phrases
  2. Provide context - Make it clear what's hidden (answer, spoiler, hint)
  3. Don't overuse - Too many spoilers can be distracting
  4. Consider alternatives - For long content, use :::details instead
Back to Markdown Features