如何在github wiki页面制作"剧透"文本？
Chr*_*eck 71 html github github-flavored-markdown
我正在尝试制作在鼠标悬停之前不可见的文本,或者具有"显示"/"隐藏"按钮或其他一些东西,以便在用户以某种方式与其交互之前它是不可见的.
我正在尝试在github wiki页面上执行此操作.(特别是它是一个简短的自我测验.)
基本上我想获得与>!标记的SO相似的效果:
HOHO!剧透文字!
相同的标记在github中不起作用,我猜它是SO扩展？
我在github 上的注释中看到了关于使用扰流文本的问题,该文章已经关闭,但我认为维基页面可能有不同的答案,或基于HTML或其他东西的不同解决方案？
有没有人知道是否有办法做到这一点,或者如果绝对不幸的是不可能？
Gau*_*nan 120
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等.Probabaly也有解决方案.这两种格式比Markdown功能丰富得多.
- 如果可以的话，我会投票两次，谢谢。 (3认同)
TWi*_*Rob 60
基于Gaurav的回答和这个GH问题,这里是一种在GitHub wiki上的<details>标签内使用高级格式的方法:
<details>
<summary>stuff with *mark* **down**</summary>
<p>
<!-- the above p cannot start right at the beginning of the line and is mandatory for everything else to work -->
##*formatted* **heading** with [a](link)
```java
code block
```
<details>
<summary><small>nested</small> stuff</summary><p>
<!-- alternative placement of p shown above -->
* list
* with
1. nested
1. items
```java
// including code
```
1. blocks
</p></details>
</p></details>
目前它呈现如下,预期的部分可扩展和可折叠:
初始状态
点击摘要
单击嵌套摘要
- 按[此GitHub评论](https://github.com/dear-github/dear-github/issues/166#issuecomment-322367328),确保`<p>`和`\之间有一条线`\`\``.否则这种技术将无效. (6认同)
- @phil294 感谢您的提醒，已修复。遗憾的是，这种做法已经过时了，因此随着 GitHub 的发展需要进行一些调整。还添加了一个注释来指出这一点。 (2认同)
小智 11
html元素<details>,并<summary>可以做到这一点,看看:
http://caniuse.com/#search=details
对Firefox和Edge的支持很差,但可能会有一些pollyfill ......
- 虽然这是一个有趣的观点，但我觉得它应该只是[对另一个答案的评论](http://stackoverflow.com/a/33033172/2657549)（我知道这是后来的）。 (2认同)
CSS如果您可以选择编辑，您可以简单地使用
[](#spoiler "Spoiler Filled Text")
然后使用 (pure)CSS给出正确的外观。
[](#spoiler "Spoiler Filled Text")
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;
}（隐约受到这段代码的启发）