Html 如何在 github wiki 页面中制作“剧透”文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32814161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make "spoiler" text in github wiki pages?
提问by Chris Beck
I'm trying to make text which is either invisible until moused over, or, has a "show" / "hide" button, or some other thing, so that it is not visible until the user interacts with it in some way.
我正在尝试使文本在鼠标悬停之前不可见，或者具有“显示”/“隐藏”按钮或其他一些东西，以便在用户以某种方式与其交互之前不可见。
I'm trying to do this on a github wiki page. (Specifically it's for a short self-quiz.)
我正在尝试在 github wiki 页面上执行此操作。（具体来说，这是一个简短的自我测验。）
Basically I want to get a similar effect to what SO achieves with the >!markup:
基本上，我想获得与 SO 通过>!标记实现的效果类似的效果：
Hoho! Spoiler text!
呵呵！剧透文！
as described in thesemetaposts.
The same markup doesn't work in github, I guess that it's an SO extension?
相同的标记在 github 中不起作用，我猜它是一个 SO 扩展？
I saw this issueabout using spoiler text in commentson github, which was closed, but I thought there might be a different answer for the wiki pages, or a different solution based on HTML or something?
我在 github上的评论中看到了有关使用剧透文本的问题，该问题已关闭，但我认为 wiki 页面可能有不同的答案，或者基于 HTML 或其他内容的不同解决方案？
Does anyone know if there's a way to do this, or if it is definitely unfortunately impossible?
有谁知道是否有办法做到这一点，或者不幸的是，这绝对是不可能的？
采纳答案by Chris
The documentation for GitHub Flavored Markdownmakes no mention of spoilers, so I suspect it's not supported. It's definitely not part of the original Markdown spec.
GitHub Flavored Markdown的文档没有提到剧透，所以我怀疑它不受支持。它绝对不是原始 Markdown 规范的一部分。
回答by Gaurav Ramanan
GFM supports a subsetof HTML. For now, you can wrap your question in a <summary>and your answer in any standard HTML tag like <p>and wrap the whole thing in the <details>tag.
GFM 支持HTML 的一个子集。现在，您可以将问题包装在 a 中，<summary>并将答案包装在任何标准的 HTML 标签中，例如<p>将整个内容包装在<details>标签中。
So if you do this
所以如果你这样做
<details>
<summary>Q1: What is the best Language in the World? </summary>
A1: JavaScript
</details>
You get this -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test
你得到这个 -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test
Browser support is an Issue.
浏览器支持是一个问题。
The thing with GitHUB wiki is that it allows you write text in other formats like AsciiDoc, RSTetc. Probabaly there's solution in those too. These are 2 formats that are far more feature rich than Markdown.
GitHub wiki 的特点是它允许您以其他格式编写文本，如AsciiDoc、RST等。可能也有解决方案。这是 2 种格式，功能远比 Markdown 丰富。
回答by TWiStErRob
Building on Gaurav's answerand this GH issuehere's a way to use advanced formatting inside the <details>tag on GitHub:
基于Gaurav 的回答和这个 GH 问题，这里有一种在 GitHub 上的<details>标签内使用高级格式的方法：
Note: original answer from 2016 required <p>, since 2017 that requirement is an empty line after </summary>(i.e. before expanded contents). Somewhere along the line leading up to 2019, markdown in <summary>is not working any more either. You can see it's quite flaky as it's a hack/workaround, not a supported feature/use case. Also note that issue/PR comments support different formatting than Wikis (e.g. 2020 April underline in summary only works on Wiki, not on issues).
注意：2016 年的原始答案 required <p>，自 2017 年以来，该要求是之后</summary>（即扩展内容之前）的空行。在 2019 年之前的某个地方，markdown in<summary>也不再起作用。您可以看到它非常不稳定，因为它是一种黑客/解决方法，而不是受支持的功能/用例。另请注意，问题/PR 评论支持与 Wiki 不同的格式（例如，摘要中的 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><summary></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>
Currently it renders as the following with the expected parts expandable and collapsible:
目前，它呈现为以下预期部分可展开和可折叠：
Initial state
初始状态
Click on summary
点击摘要
Click on nested summary
单击嵌套摘要
回答by vicmontol
The html element <details>and <summary>can do it, have a look:
html元素<details>又<summary>可以做到，看看：
http://caniuse.com/#search=details
http://caniuse.com/#search=details
Support is poor for Firefox & Edge, but there may be some pollyfills...
对 Firefox 和 Edge 的支持很差，但可能会有一些pollyfills...
回答by Clément
If editing the CSSis an option for you, you can simply use
如果编辑CSS是您的一个选项，您可以简单地使用
[](#spoiler "Spoiler Filled Text")
and then use (pure) CSSto give the correct appearance.
然后使用 (pure)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>(Vaguely inspired from this code)
（从这段代码中隐约得到启发）
