github wikiページで「ネタバレ」テキストを作成するにはどうすればよいですか？

Question 1

マウスオーバーするまで表示されないテキスト、または「表示」/「非表示」ボタンなどがあるテキストを作成して、ユーザーが何らかの方法で操作するまで表示されないようにしようとしています。

githubwikiページでこれを実行しようとしています。（具体的には、短い自己クイズ用です。）

基本的に、SOが>!マークアップで達成するのと同様の効果を得たいと思います。

ホーホー！ネタバレテキスト！

これらのメタ投稿で説明されているように。

同じマークアップはgithubでは機能しません。SO拡張機能だと思いますか？

閉じられたgithubのコメントでネタバレテキストを使用することについてこの問題を見ましたが、wikiページに対する別の答え、またはHTMLなどに基づく別の解決策があるのではないかと思いました。

これを行う方法があるかどうか、またはそれが間違いなく残念ながら不可能かどうかを誰かが知っていますか？

Question 2

GitHub Flavoured Markdownのドキュメントにはスポイラーについての記載がないため、サポートされていないようです。それは間違いなく元のMarkdown仕様の一部ではありません。

Question 3

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 wikiの特徴は、AsciiDoc、RSTなどの他の形式でテキストを記述できることです。おそらくそれらにも解決策があります。これらは、Markdownよりもはるかに機能が豊富な2つの形式です。

Question 4

上の建物のGauravの答えと、このGHの問題は、ここで内部の高度な書式設定を使用する方法です<details>タグGitHubの上：

注：2016年からの元の回答が必要です<p>。2017年以降、その要件は後</summary>（つまり、拡張されたコンテンツの前）の空の行です。2019年までのどこかで、マークダウンイン<summary>も機能しなくなりました。これはハック/回避策であり、サポートされている機能/ユースケースではないため、かなり不安定であることがわかります。また、issue / PRコメントはWikiとは異なるフォーマットをサポートしていることに注意してください（たとえば、2020年4月の下線は、要約ではWikiでのみ機能し、問題では機能しません）。

<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>

現在、次のようにレンダリングされ、予想されるパーツは拡張可能で折りたたみ可能です。

初期状態

概要をクリックします

ネストされた要約をクリックします

Question 5

html要素<details>とそれ<summary>を行うことができます、見てください：

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

FirefoxとEdgeのサポートは不十分ですが、いくつかのポリフィルがある可能性があります...

Question 6

編集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>

スニペットを展開

（このコードから漠然とインスピレーションを得ています）

Question 7

詳細/要約タグとは異なる解決策ですが、ネイティブhtmlを使用することも、タイトル付きのスパンを使用することです。私は最近、組織モードでこのようなことをしていました。