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更具功能的格式。
在 Gaurav 的回答 和 这个 GH 问题 的基础上,以下是一种在 GitHub 上使用高级格式化的方法,它可以放置在 <details>
标签中:
注意:2016 年的原始答案需要 <p>
,自 2017 年起,要求在 </summary>
(即扩展内容之前)之后有一个空行。在 2019 年之前的某个时候,<summary>
中的 markdown 不再起作用。由于这是一个 hack/workaround,而不是受支持的特性/用例,因此您可以看到它相当脆弱。还请注意,问题/PR 评论支持与 Wikis 不同的格式(例如,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><summary></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>
目前它的呈现方式如下,预期部分可以展开和折叠:
在GitHub Flavored Markdown或原始Markdown实现中,不支持如问题所示的文字剧透。
然而,Markdown支持内联HTML,并且GitHub允许呈现输出中保留一些HTML标签的子集。 如其他答案中所述,在GitHub上可以使用<details>
。
如果这已经足够“剧透”了,请随意使用它。
HTML元素<details>
和<summary>
可以实现此功能,看看:
http://caniuse.com/#search=details
对Firefox和Edge的支持较差,但可能有一些填充程序...
[](#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>
(受 这段代码 的启发)