如何在github wiki页面中制作“spoiler”文本?

我正在尝试创build一些文字, 直到模糊不清 ,或者有一个“显示”/“隐藏”button ,或者其他一些东西,直到用户以某种方式与之交互时才会显示。

我试图在github wiki页面上做到这一点。 (具体来说,这是一个简短的自测。)

基本上我想得到类似的效果,以什么SO实现与>! 标记:

HOHO! 扰stream板文本!

如这些 元post中所述。

同样的标记在github中不起作用,我想这是一个SO扩展?

我看到这个关于在github上的评论中使用扰stream文本的问题 ,这个文章已经closures,但是我认为wiki页面可能有不同的答案,或者是基于HTML或者其他的解决scheme。

有谁知道是否有办法做到这一点,或者如果它绝对不幸是不可能的?

GitHub Flavored Markdown的文档没有提到破坏者,所以我怀疑它不被支持。 这绝对不是原来的Markdown规范的一部分 。

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维基的事情是,它允许你写其他格式的文本,如AsciiDocRST等。Probabaly也有这样的解决scheme。 这些是比Markdownfunction更丰富的两种格式。

build立在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> 

目前它呈现为以下与预期的部分可扩展和可折叠:


初始状态

在这里输入图像说明


点击摘要

在这里输入图像说明


点击嵌套摘要

在这里输入图像说明

html元素<details><summary>可以做到这一点,看看:

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

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

如果编辑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>