如何在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维基的事情是,它允许你写其他格式的文本,如AsciiDoc , RST等。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>