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 的 >! 在其他平台會被當成引用區塊

所以用之前先確認你所在的是哪個平台，選對應的語法。

參考來源