web-dev-qa-db-ja.com

github wikiページで「ネタバレ」テキストを作成する方法は？

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

Github wikiページでこれをやろうとしています。 （具体的には、短い自己テスト用です。）

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

ほほ！ネタバレ！

これらメタ 投稿で説明されています。

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

この問題 githubのcommentsでスポイラーテキストを使用することについては閉じていましたが、wikiページには別の答えがあるかもしれないと思いました。またはHTMLなどに基づいた別のソリューションですか？

これを行う方法があるのか​​、それとも間違いなく不可能なのかを誰もが知っていますか？

htmlgithubgithub-flavored-markdown
68
Chris Beck

GitHub Flavored Markdownのドキュメント では、ネタバレについては言及されていないため、サポートされていないと思われます。 元のマークダウン仕様 の一部ではありません。

26
Chris

GFMは、HTMLのサブセットをサポートしています。現時点では、質問を<summary>でラップし、回答を<p>などの標準HTMLタグでラップし、<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つの形式です。

118
Gaurav Ramanan

Gaurav's answer および この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>

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

初期状態

enter image description here

要約をクリックします

enter image description here

ネストされたサマリーをクリック

enter image description here

59
TWiStErRob

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

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

FirefoxとEdgeのサポートは貧弱ですが、いくつかのpollyfillsがあるかもしれません...

11
vicmontol

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>

（漠然とインスピレーション このコードから ）

3
Clément