जीथब विकी पेजों में "स्पॉइलर" टेक्स्ट कैसे बनाया जाए?

Question

मैं पाठ बनाने की कोशिश कर रहा हूं जो या तो अदृश्य है जब तक कि मूस नहीं है , या, एक "शो" / "छिपाएं" बटन , या कोई अन्य चीज है, ताकि यह तब तक दिखाई न दे जब तक कि उपयोगकर्ता किसी तरह से इसके साथ बातचीत न करे।

मैं इसे जीथब विकी पेज पर करने की कोशिश कर रहा हूं। (विशेष रूप से यह एक लघु स्व-प्रश्नोत्तरी के लिए है।)

मूल रूप से मैं एक समान प्रभाव प्राप्त करना चाहता हूं जो एसओ >!मार्कअप के साथ प्राप्त करता है :

होहो! स्पॉयलर पाठ!

जैसा कि इन मेटा पोस्टों में वर्णित है ।

समान मार्कअप जीथब में काम नहीं करता है, मुझे लगता है कि यह एक एसओ एक्सटेंशन है?

मैंने जीथब पर टिप्पणियों में स्पॉइलर टेक्स्ट का उपयोग करने के बारे में इस मुद्दे को देखा , जिसे बंद कर दिया गया था, लेकिन मैंने सोचा कि विकी पृष्ठों के लिए एक अलग उत्तर हो सकता है, या एचटीएमएल या कुछ पर आधारित एक अलग समाधान हो सकता है?

क्या कोई जानता है कि क्या ऐसा करने का कोई तरीका है, या अगर यह निश्चित रूप से दुर्भाग्य से असंभव है?

Comments

नोट: कुछ उपयोगी टिप्पणियां दिखाई गई थीं, जो यहां github isuse पृष्ठ पर करने के लिए वैकल्पिक दृष्टिकोण दिखा रही हैं: github.com/github/markup/issues/411#issuecomment-176907678

— क्रिस बेक

Answer 1

GitHub फ्लेवर्ड Markdown के लिए दस्तावेज़ विफल कोई जिक्र नहीं है, इसलिए मैं यह समर्थित नहीं है संदेह है। यह निश्चित रूप से मूल मार्कडाउन युक्ति का हिस्सा नहीं है ।

Comments

हाँ ... मैं इस पृष्ठ को देख रहा था, जहाँ यह उन सभी मार्कअप प्रारूपों को सूचीबद्ध करता है, जिनका वे समर्थन करते हैं। (ऐसा प्रतीत होता है कि वे विकी पेज एडिटर में भी उनका समर्थन करते हैं।) मैं प्रत्येक संक्षिप्त दस्तावेज के माध्यम से चला गया, जिस पर मुझे यकीन नहीं था कि वह 'rst' था, दूसरे भी बहुत आशाजनक नहीं लग रहे थे, लेकिन शायद मैं कुछ याद कर रहा था। .. मुझे लगता है कि तुम सही हो। github.com/github/markup सबसे अच्छा विकल्प यह हो सकता है कि वह 'github पृष्ठों' पृष्ठ पर हो जो विकी या किसी अन्य चीज़ से जुड़ा हो?

— क्रिस बेक

Answer 2

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-Kife/wiki/Read-More-Test

ब्राउज़र समर्थन एक समस्या है।

GitHUB wiki के साथ बात यह है कि यह आपको अन्य स्वरूपों जैसे AsciiDoc , RST आदि में पाठ लिखने की अनुमति देता है। ये 2 प्रारूप हैं जो मार्कडाउन की तुलना में अधिक समृद्ध हैं।

Answer 3

गौरव के उत्तर और इस GH मुद्दे पर बिल्डिंग यहां GitHub पर<details> टैग के अंदर उन्नत स्वरूपण का उपयोग करने का एक तरीका है :

नोट: २०१६ से मूल उत्तर आवश्यक <p>, २०१ 2016 के बाद से यह आवश्यकता एक खाली लाइन के बाद </summary>(यानी विस्तारित सामग्री से पहले) है। कहीं न कहीं 2019 तक आने वाली लाइन में मार्कडाउन <summary>भी काम नहीं कर रहा है। आप यह देख सकते हैं कि यह हैक / वर्कअराउंड है, एक समर्थित सुविधा / उपयोग के मामले के रूप में यह काफी परतदार है। यह भी ध्यान दें कि इश्यू / पीआर टिप्पणियां विकीस की तुलना में विभिन्न फॉर्मेटिंग का समर्थन करती हैं (उदाहरण के लिए सारांश में केवल अप्रैल में ही काम करता है, न कि 2020 अप्रैल को रेखांकित करें)।

<details>
  <summary>stuff with *mark* **down** in `summary` doesn't work any more, use HTML <i>italics</i> and <b>bold</b> instead in <code>&lt;summary&gt;</code> (<i>click to expand</i>)</summary>
  <!-- have to be followed by an empty line! -->

## *formatted* **heading** with [a](link)
```java
code block
```

  <details>
    <summary><u>nested</u> <b>stuff</b> (<i>click to expand</i>)</summary>
    <!-- have to be followed by an empty line! -->

A bit more than normal indentation is necessary to get the nesting correct,
 1. list
 1. with
    1. nested
    1. items
        ```java
        // including code
        ```
    1. blocks
 1. and continued non-nested

  </details>
</details>

वर्तमान में यह विस्तार योग्य और बंधनेवाला भागों के साथ निम्नलिखित के रूप में प्रस्तुत करता है:

---

प्रारम्भिक अवस्था

---

सारांश पर क्लिक करें

---

नेस्टेड सारांश पर क्लिक करें

Comments

प्रति इस GitHub टिप्पणी , सुनिश्चित करें के बीच एक रेखा है कि वहाँ बनाने <p>और ```। अन्यथा यह तकनीक काम नहीं करेगी।

— बेंजामिन

किसी भी विचार कैसे इसके बाद एक newline प्राप्त करने के लिए? जब मैं इस तकनीक को आजमाता हूं तो यह बाद के पैराग्राफ में बदल जाता है। (बिना <br/> टैग के मेरा मतलब है)

— अपोलो मोनिका का

खैर जब मैं आपके सटीक उत्तर कोड को कॉपी करता हूं, तो यह कोई भी प्रारूपण नहीं दिखाता है। तो यहाँ कुछ गलत है

— phil294

@ phil294 अलर्ट के लिए धन्यवाद, निश्चित। अफसोस की बात यह है कि इस रोश को कुछ समायोजन की जरूरत है क्योंकि गीथबब विकसित होता है। इसे नोट करने के लिए एक नोट भी जोड़ा।

— ट्वीस्ट्रॉब

Answer 4

Html तत्व <details>और <summary>कर सकते हैं, एक नज़र:

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

फ़ायरफ़ॉक्स और एज के लिए समर्थन खराब है, लेकिन कुछ पॉलीफ़िल हो सकते हैं ...

Comments

हालांकि यह एक दिलचस्प बिंदु है, मुझे लगता है कि यह केवल एक और उत्तर के लिए एक टिप्पणी होनी चाहिए (जो बाद में आई, मुझे पता है)।

— क्लेमेंट

Answer 5

यदि संपादन 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>

( इस कोड से अस्पष्ट रूप से प्रेरित )

Answer 6

विवरण / सारांश टैग से एक अलग समाधान, लेकिन मूल HTML का उपयोग करके एक शीर्षक के साथ एक स्पैन का उपयोग करना है। मैं हाल ही में ओआरजी मोड में कुछ ऐसा कर रहा था।