Markdown 剧透隐藏文字语法教程

Markdown 本身没有标准的剧透（spoiler）语法——CommonMark 规范里压根就没提过这个功能。但各大社交平台各自搞了一套，语法还互不兼容。这篇文章帮你梳理 Discord、Reddit、Stack Exchange、Mastodon 等平台的剧透写法，顺便说说我实际用下来遇到的坑。

先说一个容易混淆的事：剧透（spoiler）和折叠（collapse）不是一回事。 剧透是让文字"黑条遮住，点击/悬停才显示"，重点是保护读者不被意外看到；折叠是让大段内容收起来节省空间，点击展开。如果你要的是折叠效果，去看 Markdown 折叠内容教程，那边讲的是 <details> / <summary> 标签的用法。

各平台剧透语法速查表

先来一张总览，方便你快速找到需要的语法：

平台语法类型触发方式
Discord\|\|spoiler\|\|行内点击显示
Reddit>!spoiler!<行内点击显示
Stack Exchange>! spoiler块级鼠标悬停
MastodonCW（内容警告）整条消息点击展开
HTML（通用）<details>块级点击展开

注意"类型"这一列——Discord 和 Reddit 的剧透可以夹在句子中间，只遮住几个字；Stack Exchange 的剧透必须是整块内容。

Discord 剧透语法：||双竖线||

基本用法

Discord 使用双竖线 || 包裹文字来实现剧透效果：

这集结局是 ||主角其实已经死了||，没想到吧。

发送后，被 || 包裹的部分会显示为黑色色块，其他用户需要点击才会看到内容。

几个实用技巧

整条消息标记为剧透：在消息开头输入 /spoiler，整条消息都会被遮住：

/spoiler 第三季第五集的重大转折细节

图片和链接也能剧透：上传附件时，点击附件右上角的眼睛图标即可标记为剧透。链接的话，直接把 URL 用 || 包起来就行：

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

移动端操作：iOS 可以选中文字后长按，在弹出菜单里选"标记为剧透"。Android 端暂时只能手动输入 || 语法。

说实话，Discord 的剧透是我用过最顺手的。语法短、支持图片、移动端也有快捷操作，日常聊天基本够用。有一点要注意：代码块里的 || 不会被识别为剧透，这个在官方文档里也有说明。

Reddit 剧透语法：>!感叹号!<

基本用法

Reddit 使用 >! 开头、!< 结尾来标记行内剧透：

这部电影的反派其实是 >!主角的父亲!<，经典桥段了。

容易踩的坑

Reddit 的剧透语法有几个细节，我第一次用的时候翻车了好几次：

1. 前后不能有空格

❌ >! 剧透内容 !<    （感叹号和文字之间有空格，不生效）
✅ >!剧透内容!<      （紧贴文字才有效）

这个坑我踩过——在手机上打字时手指一抖多了个空格，结果剧透没遮住，直接剧透了整个讨论区。所以打完之后一定检查一下空格。

2. 换行会中断剧透

Reddit 的 >!...!< 是行内的，不能跨行。如果需要多行剧透，只能拆成多个独立的 >!...!< 标记，或者每行都写一遍。

3. 不是所有子版块都支持

有些旧的 subreddit 没有启用剧透 CSS，你的 >!...!< 可能直接以原文显示。建议先发一条测试消息确认一下。

Stack Exchange 剧透语法：>! 块级遮罩

基本用法

Stack Exchange 系列网站（Stack Overflow、各领域问答站）使用 >! 开头的块级剧透：

>! 这个答案是 42。
>! 第二行剧透内容。

这个语法其实是借用了 Markdown 的引用语法 >，在后面加了个 !。渲染后文字颜色和背景色相同，鼠标悬停（或手机上触摸）才会显示。

多行规则

Stack Exchange 的剧透要求每一行都以 >! 开头。只要有一行漏掉了，那行就不在剧透区块里：

>! 第一行剧透
>! 第二行剧透
这行不会被遮住！因为前面没有 >!

另外，如果剧透块里出现了空行（只有 > 没有 !），整个区块的剧透效果也会失效。Stack Exchange 开发者 Kevin Montrose 在 Meta 上明确解释过这个规则。

局限性

Stack Exchange 的剧透是块级的，不能在段落中间只遮几个字。而且实现方式是"文字颜色=背景色"，不是真正意义上的隐藏——选中文字也能看到内容。另外图片在剧透块里有时无法被遮住，这是已知的问题。

Mastodon 内容警告（CW）

Mastodon 的做法跟前面几个平台不太一样。它没有专门的 Markdown 剧透语法，而是在发布消息时提供一个 Content Warning（CW，内容警告） 输入框。

使用方式

  1. 在撰写消息时，点击输入框下方的 CW 按钮
  2. 输入警告文字（比如"剧透：电影结局"）
  3. 在下方的正文区域写实际内容

发布后，其他用户先看到的是警告文字，需要点击"展开更多"才能看到正文。

特点

CW 跟 Markdown 语法无关，它完全是 Mastodon 平台的功能。好处是整条消息都被保护，坏处是没法只遮住消息中的某一部分。它更像是给帖子贴个标签说"这里面的内容可能让人不适"，用法比纯粹的剧透更广泛——有些人拿它来隐藏长文、敏感内容、或者不想让别人在时间线上直接看到的文字。

其他平台的剧透方案

Obsidian 笔记

Obsidian 有多个社区插件支持剧透功能：

  • Inline spoilers：使用 Discord 风格的 ||spoiler|| 语法
  • Spoiler Block：提供专门的剧透块语法
  • Extended Markdown Syntax：通过自定义分隔符支持剧透、高亮等扩展

在 Obsidian 官方插件市场搜索 "spoiler" 就能找到这些插件。

HTML 通用方案（details/summary）

如果你需要在 GitHub、GitLab 或者自己的博客上实现类似效果，HTML 的 <details> / <summary> 标签是最通用的选择。严格来说这是"折叠"而不是"剧透"——内容默认收起，点击展开，而不是黑条遮住。详细用法参见 Markdown 折叠内容教程。

简单示例：

<details>
  <summary>点击查看剧透</summary>

  这里是隐藏的内容。

</details>

CSS 自定义方案

在自己控制的网站上，你可以用 CSS 实现真正的"黑条剧透"效果：

.spoiler {
  background-color: black;
  color: black;
}
.spoiler:hover {
  color: white;
}
<span class="spoiler">被遮住的剧透内容</span>

鼠标悬停时文字变为白色，就能看到了。这个方案在 R Markdown 和 Hugo 等静态站点中都适用。

剧透语法不生效？常见问题排查

语法写对了但没遮住

  • 检查空格：Reddit 的 >! 和 !< 必须紧贴文字
  • 检查是否在代码块内：Discord 代码块里的 || 不会生效
  • 检查平台是否支持：标准 Markdown 解析器不认识任何剧透语法

跨平台使用的问题

这些剧透语法都是各平台自己扩展的，互相不兼容：

  • Discord 的 ||spoiler|| 发到 Reddit 上就是普通文字
  • Reddit 的 >!spoiler!< 发到 Discord 上也是原样显示
  • Stack Exchange 的 >! 在其他平台会被当成引用块

所以用之前先确认你所在的是哪个平台，选对应的语法。

参考来源