2015-09-28 188 views
42

我试图使不可见的文本直到被模糊,或者有一个“显示”/“隐藏”按钮或其他一些东西,以至于直到用户与用户交互它以某种方式。如何在github wiki页面中制作“spoiler”文本?

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

基本上我想要得到什么SO与>!标记达到类似的效果:

HOHO!扰流板文本!

thesemeta中所述。

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

我看到this issue有关评论在github上,它被关闭使用扰流板的文字,但我认为有可能是维基页面不同的答案,或者基于HTML或一些不同的解决方案?

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

+0

注:有显示这样做对GitHub的替代方法一些非常有用的意见在这里isuses页:https://github.com/ github/markup/issues/411#issuecomment-176907678 –

回答

22

documentation for GitHub Flavored Markdown没有提及破坏者,所以我怀疑它不被支持。这绝对不是the original Markdown spec的一部分。

+0

是的......我正在查看此页面,它列出了它们支持的所有各种标记格式。 (他们似乎也支持他们在维基页面编辑器中。)我仔细检查了每个文档,其中我不确定的是第一个,其他人看起来不太有希望,但也许我错过了一些东西。 .. atm我倾向于认为你是对的。 https://github.com/github/markup最好的选择可能是在wiki链接到的'github页面'页面上完成它或者什么? –

9

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

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

支持较差的Firefox &边缘,但可能会有一些pollyfills ...

+0

如何应用你在http://github.com上填充? – TWiStErRob

+0

尽管这是一个有趣的观点,但我觉得它应该只是[另一个答案的评论](http://stackoverflow.com/a/33033172/2657549)(后来才知道)。 –

71

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有那些解决方案了。这些是比Markdown功能更丰富的两种格式。

26

大厦Gaurav's answerthis GH issue这里有一个方法来对GitHub的维基使用<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> 

目前,它呈现为与预期的部分扩张和收缩的以下内容:


初始状态

enter image description here


点击汇总

enter image description here


点击嵌套总结

enter image description here

2

如果编辑CSS是一个选择,你可以SIM卡使用

[](#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