github wiki 페이지에서 "spoiler"텍스트를 만드는 방법은 무엇입니까?

github wiki 페이지에서 "spoiler"텍스트를 만드는 방법은 무엇입니까?

---

마우스를 올려 놓을 때까지 보이지 않거나 "표시"/ "숨기기"버튼 또는 기타 항목 이있는 텍스트를 만들어 사용자가 어떤 방식 으로든 상호 작용할 때까지 표시되지 않도록하려고합니다.

나는 github wiki 페이지에서 이것을 시도하고 있습니다. (특히 짧은 셀프 퀴즈입니다.)

기본적으로 >!마크 업으로 SO가 달성하는 것과 비슷한 효과를 얻고 싶습니다 .

호호! 스포일러 텍스트!

이 메타 게시물에 설명 된대로 .

github에서 동일한 마크 업이 작동하지 않습니다. SO 확장이라고 생각합니까?

닫힌 github의 주석 에서 스포일러 텍스트를 사용하는 것에 대한 이 문제 를 보았지만 위키 페이지에 대한 다른 답변이 있거나 HTML을 기반으로 한 다른 솔루션이 있다고 생각했습니다.

이 작업을 수행 할 방법이 있는지 또는 불행히도 확실히 불가능한지 아는 사람이 있습니까?

---

GitHub의 맛을 마크 다운에 대한 문서는 스포일러에 대한 언급을하지 않으며, 그래서 나는이 지원되지 않는 생각한다. 확실히 원래 Markdown 사양의 일부가 아닙니다 .

---

GFM은 HTML 의 하위 집합 을 지원합니다 . 지금은 질문을 a로 감싸고 <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 등과 같은 다른 형식으로 텍스트를 작성할 수 있다는 것입니다 . Probabaly에도 솔루션이 있습니다. Markdown보다 훨씬 더 풍부한 기능을 제공하는 두 가지 형식입니다.

---

바탕 Gaurav의 대답 과 이 GH 문제가 여기에 내부에 고급 서식을 사용하는 방법 <details>태그 GitHub의 위키 :

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

현재 예상되는 부분이 확장 및 축소 가능한 다음과 같이 렌더링됩니다.

---

초기 상태

---

요약을 클릭하십시오

---

중첩 된 요약을 클릭하십시오.

---

html 요소는 다음 <details>과 같이 <summary>할 수 있습니다.

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

Firefox 및 Edge에 대한 지원은 좋지 않지만 일부 폴리 필이있을 수 있습니다 ...

---

편집이 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>

( 이 코드에서 모호하게 영감 을 얻었습니다 )

참고 URL : https://stackoverflow.com/questions/32814161/how-to-make-spoiler-text-in-github-wiki-pages