如何在 github wiki 页面中制作 "spoiler" 文本？

Question

我正在尝试制作 在鼠标悬停在 上之前不可见的文本，或者 具有 "show" / "hide"按钮，或其他一些东西，以便在用户以某种方式与之交互之前它是不可见的。

我正在尝试在 github wiki 页面上执行此操作。（具体是为了一个简短的自测。）

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

呵呵！剧透文字！

如 these meta 个帖子所述。

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

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

有谁知道是否有办法做到这一点，或者不幸的是，这绝对不可能吗？

Answer 1

documentation for GitHub Flavored Markdown makes no mention of spoilers, so I suspect it's not supported. It's definitely not part of the original Markdown spec.

Answer 2

html元素<details>和<summary>可以做到，看看：

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

对 Firefox 和 Edge 的支持很差，但可能会有一些 pollyfills...

Answer 3

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 丰富。

Answer 4

在 and this GH issue 的基础上，这里有一种在 <details> 标签内使用高级格式的方法 on GitHub:

注意：2016 年的原始答案需要 <p>，自 2017 年以来，该要求是 </summary> 之后的空行（即在扩展内容之前）。在 2019 年之前的某处，<summary> 中的降价也不再起作用。您可以看到它非常脆弱，因为它是 hack/workaround，而不是受支持的 feature/use 案例。另请注意，issue/PR 评论支持与 Wiki 不同的格式（例如，摘要中的 2020 April 下划线仅适用于 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>

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

初始状态

点击摘要

点击嵌套摘要

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>

（隐约启发from this code）

Answer 6

与详细信息/摘要标签不同的解决方案，但也使用原生 html 是使用带有标题的跨度。我最近在组织模式下做了这样的事情。

如何在 github wiki 页面中制作 "spoiler" 文本？

How to make "spoiler" text in github wiki pages?

html

github

github-flavored-markdown

初始状态

点击摘要

点击嵌套摘要