Tôi đang cố gắng làm cho văn bản ẩn cho đến khi di chuyển qua hoặc có nút "hiển thị" / "ẩn" hoặc một số thứ khác, để nó không hiển thị cho đến khi người dùng tương tác với nó theo một cách nào đó.

Tôi đang cố gắng thực hiện việc này trên trang wiki github. (Cụ thể là nó dành cho một bài kiểm tra ngắn về bản thân.)

Về cơ bản, tôi muốn có được hiệu ứng tương tự như những gì SO đạt được với >!đánh dấu:

Hoho! Văn bản spoiler!

như được mô tả trong các bài viết meta này .

Đánh dấu tương tự không hoạt động trong github, tôi đoán rằng đó là một tiện ích mở rộng SO?

Tôi đã gặp sự cố này về việc sử dụng văn bản spoiler trong các nhận xét trên github, trang này đã bị đóng, nhưng tôi nghĩ có thể có một câu trả lời khác cho các trang wiki hoặc một giải pháp khác dựa trên HTML hay gì đó?

Có ai biết nếu có một cách để làm điều này, hoặc nếu nó chắc chắn là không thể?

Các tài liệu cho GitHub Flavored Markdown không đề cập đến spoilers, vì vậy tôi nghi ngờ nó không được hỗ trợ. Nó chắc chắn không phải là một phần của thông số Markdown ban đầu .

GFM hỗ trợ một tập con HTML. Hiện tại, bạn có thể gói câu hỏi của mình bằng a <summary>và câu trả lời của bạn trong bất kỳ thẻ HTML chuẩn nào như <p>và gói toàn bộ nội dung trong <details>thẻ.

Vì vậy, nếu bạn làm điều này

<details> 
  <summary>Q1: What is the best Language in the World? </summary>
   A1: JavaScript 
</details>

Bạn nhận được điều này -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

Hỗ trợ trình duyệt là một vấn đề.

Điều với wiki GitHUB là nó cho phép bạn viết văn bản ở các định dạng khác như AsciiDoc , RST , v.v. Probabaly cũng có giải pháp cho những định dạng đó. Đây là 2 định dạng có nhiều tính năng phong phú hơn Markdown.

Dựa trên câu trả lời của Gaurav và vấn đề GH này, đây là một cách để sử dụng định dạng nâng cao bên trong <details>thẻ trên GitHub :

Lưu ý: yêu cầu câu trả lời gốc từ năm 2016 <p>, từ năm 2017 yêu cầu đó là một dòng trống sau </summary>(tức là trước nội dung mở rộng). Ở đâu đó từ trước đến năm 2019, đánh dấu <summary>cũng không hoạt động nữa. Bạn có thể thấy nó khá lỏng lẻo vì đây là một cách hack / giải pháp thay thế, không phải là một tính năng / trường hợp sử dụng được hỗ trợ. Cũng xin lưu ý rằng các bình luận về vấn đề / PR hỗ trợ định dạng khác với Wiki (ví dụ: gạch dưới tháng 4 năm 2020 tóm lại chỉ hoạt động trên Wiki, không hoạt động trên các vấn đề).

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

Hiện tại, nó hiển thị như sau với các phần dự kiến ​​có thể mở rộng và thu gọn:

Trạng thái ban đầu

Nhấp vào tóm tắt

Nhấp vào tóm tắt lồng nhau

Phần tử html <details>và <summary>có thể làm được, hãy xem:

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

Hỗ trợ kém cho Firefox & Edge, nhưng có thể có một số pollyfills ...

Nếu chỉnh sửa CSSlà một tùy chọn cho bạn, bạn có thể chỉ cần sử dụng

[](#spoiler "Spoiler Filled Text")

và sau đó sử dụng (nguyên chất) CSSđể tạo ra hình dạng chính xác.

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>

(Mơ hồ lấy cảm hứng từ mã này )

Một giải pháp khác với các thẻ chi tiết / tóm tắt, nhưng cũng sử dụng html gốc là sử dụng khoảng cách với tiêu đề. Tôi đã làm một cái gì đó như thế này gần đây trong chế độ tổ chức.