ContextQMD
Back to Zulip

Spoilers

starlight_help/src/content/docs/spoilers.mdx

12.01.8 KB
Original Source

import {TabItem, Tabs} from "@astrojs/starlight/components";

import FlattenedSteps from "../../components/FlattenedSteps.astro"; import ZulipTip from "../../components/ZulipTip.astro"; import SpoilersExamples from "../include/_SpoilersExamples.mdx"; import SpoilersIntro from "../include/_SpoilersIntro.mdx"; import StartComposing from "../include/_StartComposing.mdx";

import SpoilerIcon from "~icons/zulip-icon/spoiler";

<SpoilersIntro />

Insert spoiler formatting

<Tabs> <TabItem label="Via compose box button"> <FlattenedSteps> <StartComposing /> 
  1. *(optional)* Select the text you want to hide inside the spoiler.
  1. Click the **spoiler** (<SpoilerIcon />) icon at the bottom of the
     compose box to insert spoiler formatting.
  1. Replace `Header` with the desired heading text.
</FlattenedSteps>

<ZulipTip>
  You can also use the **spoiler** (<SpoilerIcon />) icon to remove
  existing spoiler formatting from the selected text.
</ZulipTip>
</TabItem> <TabItem label="Via Markdown"> <FlattenedSteps> <StartComposing /> 
  1. To create a spoiler section, use triple backticks and the word spoiler
     (` ```spoiler `) followed by an optional spoiler heading, some text, and triple
     backticks at the end:

     ````
     ```spoiler The spoiler heading
     This content is initially hidden.
     ```
     ````
</FlattenedSteps>

<ZulipTip>
  A message can contain both spoilers and other content, and you can combine
  spoilers with other formatting.
</ZulipTip>
</TabItem> </Tabs>

Examples

<SpoilersExamples />