[html] github 위키 페이지에서 “spoiler”텍스트를 만드는 방법은 무엇입니까?

Question 1

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

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

기본적으로 나는 >!마크 업으로 달성하는 것과 유사한 효과를 얻고 싶습니다 .

호호! 스포일러 텍스트!

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

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

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

이를 수행하는 방법이 있는지 또는 불행히도 불가능한지 아는 사람이 있습니까?

Question 2

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

Question 3

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보다 훨씬 더 풍부한 기능을 제공하는 두 가지 형식입니다.

Question 4

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

참고 : 2016 년의 원래 답변이 필요합니다 <p>. 2017 년부터 해당 요구 사항은 다음 </summary>(즉, 확장 된 콘텐츠 앞) 빈 줄 입니다. 2019 년까지 이어지는 어딘가에서 인 마크 다운 <summary>도 더 이상 작동하지 않습니다. 지원되는 기능 / 사용 사례가 아닌 해킹 / 해결 방법이기 때문에 매우 불안정하다는 것을 알 수 있습니다. 또한 이슈 / 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도 사용하는 것은 제목이있는 범위를 사용하는 것입니다. 최근에 조직 모드에서 이와 같은 일을하고있었습니다.