2015-09-28 194 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