如何在 GitHub Wiki 页面中制作“剧透”文本？

Question

我正在尝试制作文本，要么是鼠标悬停后才可见，要么有一个“显示”/“隐藏”按钮，或者其他一些方式，以便在用户以某种方式与其交互之前不可见。

我正在尝试在github wiki页面上实现此目的。 （具体来说，这是为了进行简短的自我测验。）

基本上，我想要获得与SO使用的>!标记类似的效果：

哈哈！剧透文本！

如这些meta帖子中所述。

相同的标记在github中不起作用，我想这是SO的扩展？

我看到关于在github上在评论中使用剧透文本的此问题，该问题已关闭，但我认为可能会有不同的答案适用于wiki页面或基于HTML的不同解决方案吗？

有人知道是否有办法实现此目的，或者它是否肯定不可行？

- Chris Beck

---

请注意：在这里的 Github 问题页面上，有一些非常有用的评论展示了实现此操作的替代方法：https://github.com/github/markup/issues/411#issuecomment-176907678 - Chris Beck

Answer 1

GFM支持HTML的一部分内容。现在，您可以将问题放在<summary>标签中，将答案放在任何标准的HTML标签中，比如<p>，然后将整个内容包裹在<details>标签中。

因此，如果您这样做：

<details> 
  <summary>Q1: What is the best Language in the World? </summary>
   A1: JavaScript 
</details>

您将获得此内容 -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

浏览器支持是一个问题。

Github Wiki的好处是它允许您使用其他格式（如AsciiDoc，RST等）编写文本。也许这些格式也有解决方案。这是两种比Markdown更具功能的格式。

- Gaurav Ramanan

Answer 2

在 Gaurav 的回答 和 这个 GH 问题 的基础上，以下是一种在 GitHub 上使用高级格式化的方法，它可以放置在 <details> 标签中：

注意：2016 年的原始答案需要 <p>，自 2017 年起，要求在 </summary>（即扩展内容之前）之后有一个空行。在 2019 年之前的某个时候，<summary> 中的 markdown 不再起作用。由于这是一个 hack/workaround，而不是受支持的特性/用例，因此您可以看到它相当脆弱。还请注意，问题/PR 评论支持与 Wikis 不同的格式（例如，2020 年 4 月下划线仅在 Wiki 上工作，在问题上不起作用）。

<details>
  <summary>stuff with *mark* **down** in `summary` doesn't work any more, use HTML <i>italics</i> and <b>bold</b> instead in <code>&lt;summary&gt;</code> (<i>click to expand</i>)</summary>
  <!-- have to be followed by an empty line! -->

## *formatted* **heading** with [a](link)
```java
code block
```

  <details>
    <summary><u>nested</u> <b>stuff</b> (<i>click to expand</i>)</summary>
    <!-- have to be followed by an empty line! -->

A bit more than normal indentation is necessary to get the nesting correct,
 1. list
 1. with
    1. nested
    1. items
        ```java
        // including code
        ```
    1. blocks
 1. and continued non-nested

  </details>
</details>

目前它的呈现方式如下，预期部分可以展开和折叠：

---

初始状态

---

单击摘要

---

单击嵌套摘要

- TWiStErRob

---

根据这个GitHub评论，请确保在<p>和\```之间有一行。否则，这种技术将不起作用。 - Jade

有什么办法在这之后换行吗？当我尝试使用此技术时，它会卡在下一个段落中。（我的意思是不添加<br/>标签） - Apollys supports Monica

当我复制你的答案代码时，它没有任何格式。所以这里肯定有什么问题。 - phil294

@phil294 谢谢你的提醒，已经修复。不幸的是，这个东西会随着 GitHub 的发展而变得陈旧，需要进行一些调整。我也添加了一个注释来指出这一点。 - TWiStErRob

谢谢你提供的空行提示，非常有帮助！ - Liam Clark Gutiérrez

Answer 3

在GitHub Flavored Markdown或原始Markdown实现中，不支持如问题所示的文字剧透。

然而，Markdown支持内联HTML，并且GitHub允许呈现输出中保留一些HTML标签的子集。 如其他答案中所述，在GitHub上可以使用<details>。

如果这已经足够“剧透”了，请随意使用它。

- Chris

---

是的...我正在查看这个页面，其中列出了他们支持的各种标记格式。（看起来他们也在Wiki页面编辑器中支持它们。）我简要地阅读了每个文档，我不确定的是“rst”，其他的看起来都不太有前途，但可能我错过了什么...目前我倾向于认为你是对的。https://github.com/github/markup 最好的选择可能是在'github pages' 页面上完成，然后通过wiki或其他方式链接到它？ - Chris Beck

Answer 4

HTML元素<details>和<summary>可以实现此功能，看看：

http://caniuse.com/#search=details

对Firefox和Edge的支持较差，但可能有一些填充程序...

- vicmontol

---

虽然这是一个有趣的观点，但我觉得它应该只是对另一个答案的评论（我知道这个答案是后来的）。 - Clément

Answer 5

如果您可以编辑CSS，那么您可以简单地使用以下代码：

[](#spoiler "Spoiler Filled Text")

然后使用（纯）CSS来赋予正确的外观。

a[href="#spoiler"] {
  text-decoration: none !important;
  cursor: default;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #FFF8DC;
  border-left: 2px solid #ffeb8e;
  display: inline-block;
}
a[href="#spoiler"]::after {
  content: attr(title);
  color: #FFF8DC;
  padding: 0 0.5em;
}
a[href="#spoiler"]:hover::after,
a[href="#spoiler"]:active::after {
  cursor: auto;
  color: black;
  transition: color .5s ease-in-out;
}

<p>
  <a href="#spoiler" title="Spoiler Filled Text"></a>
</p>

（受 这段代码 的启发）

- Clément

Answer 6

与细节/摘要标签不同的解决方案，但也使用本地HTML的方法是使用带有标题的span。我最近在org模式中正在做类似这样的事情。

- L. Amber O'Hearn