如何制作＆＃34;扰流＆＃34; github维基页面中的文字？

Question

我试图制作隐藏的文字，直到为止，或者有一个＆＃34; show＆＃34; /＆＃34;隐藏＆＃34;按钮，或其他一些东西，以便在用户以某种方式与其交互之前不可见。

我试图在github wiki页面上这样做。 （特别是它是一个简短的自我测验。）

基本上我希望得到与>!标记所取得的效果相似的效果：

   Hoho！掠夺者文字！

如these meta帖子中所述。

相同的标记在github中不起作用，我猜它是SO扩展吗？

我看到this issue关于在github上的 comments 中使用扰流文本，该文章已关闭，但我认为维基页面可能有不同的答案，或基于的不同解决方案HTML还是什么？

有没有人知道是否有办法做到这一点，或者绝对不幸的是不可能？

Answer 1

GFM支持HTML的子集。目前，您可以将问题包含在<summary>中，并将答案包含在<p>等任何标准HTML标记中，并将整个内容包装在<details>标记中。

所以，如果你这样做

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

你得到了这个 - ＆gt; https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

浏览器支持是一个问题。

GitHUB wiki的用途是它允许你用其他格式写文本，如 AsciiDoc ， RST 等等。在那些Probabaly那里也有解决方案。这两种格式比Markdown功能丰富得多。

Answer 2

以Gaurav's answer和this GH issue为基础，可以在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>

目前，它呈现如下，预期的部分可扩展和可折叠：

初始状态

点击摘要

单击嵌套摘要

Answer 3

documentation for GitHub Flavored Markdown没有提到剧透，所以我怀疑它不受支持。它绝对不是the original Markdown spec的一部分。

Answer 4

html元素<details>和<summary>可以做到，看看：

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

对Firefox和Firefox的支持很差边缘，但可能有一些pollyfills ......

Answer 5

如果您可以选择编辑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>

（含糊不清的from this code）

Answer 6

不同于details / summary标签的解决方案，但也使用本机html，是使用带有标题的span。我最近在组织模式下正在做类似的事情。