Formatting Guide

Spoiler

<style>
/* Initial theme-aware spoiler styling */
.theme-aware-spoiler {
  background-color: var(--spoiler-bg, black); /* Default for light theme */
  color: var(--spoiler-fg, black); /* Hide the text */
  cursor: pointer;
  border-radius: 3px;
  padding: 0 0.2em; /* Minimal padding for better appearance */
  display: inline; /* Change to inline to prevent extra space */
  line-height: 1.2; /* Match the text height (adjust as needed) */
  vertical-align: text-top; /* Align with the top of the text */
  transition: background-color 0.3s, color 0.3s; /* Smooth transition */
  user-select: none; /* Prevent text selection */
}

/* Light theme default settings */
:root {
  --spoiler-bg: black; /* Spoiler bar color in light theme */
  --spoiler-fg: black; /* Text color (hidden) in light theme */
}

/* Dark theme adjustments */
:root.dark {
  --spoiler-bg: white; /* Spoiler bar color in dark theme */
  --spoiler-fg: white; /* Text color (hidden) in dark theme */
}

/* Show the spoiler content */
.theme-aware-spoiler.revealed {
  color: inherit; /* Reveals text */
  background-color: transparent; /* Removes the overlay */
  user-select: auto; /* Allow text selection after revealing */
}
</style>

<p>
⚠️<b>Spoilers</b>
<span class="theme-aware-spoiler" 
      onclick="this.classList.toggle('revealed')">
  Darth Vader is Luke's father Darth Vader is Luke's father Darth Vader is Luke's father Darth Vader is Luke's father Darth Vader is Luke's father Darth Vader is Luke's father Darth Vader is Luke's father Darth Vader is Luke's father.
</span>
</p>