Jak stworzyć „spoiler” na stronach wiki na githubie?


81

Próbuję utworzyć tekst, który jest niewidoczny do momentu najechania na niego kursorem myszy , ma przycisk „pokaż” / „ukryj” lub coś innego, tak aby nie był widoczny, dopóki użytkownik nie wejdzie z nim w jakąś interakcję.

Próbuję to zrobić na stronie wiki github. (W szczególności służy do krótkiego samodzielnego quizu).

Zasadniczo chcę uzyskać podobny efekt do tego, co SO osiąga ze >!znacznikami:

Hoho! Tekst spoilera!

jak opisano w tych meta postach.

Ten sam znacznik nie działa w github, myślę, że jest to rozszerzenie SO?

Widziałem ten problem dotyczący używania tekstu spoilera w komentarzach na githubie, który został zamknięty, ale pomyślałem, że może być inna odpowiedź dla stron wiki lub inne rozwiązanie oparte na HTML czy coś?

Czy ktoś wie, czy jest na to sposób, czy też jest to zdecydowanie niestety niemożliwe?


Uwaga: na stronie github isuses na stronie github isuses pojawiło się kilka całkiem przydatnych komentarzy pokazujących alternatywne sposoby postępowania: github.com/github/markup/issues/411#issuecomment-176907678
Chris Beck

Odpowiedzi:


29

Dokumentacja GitHub Aromatyzowane cenowych nie wspomina o spoilery, więc podejrzewam, że to nie jest obsługiwany. Na pewno nie jest to część oryginalnej specyfikacji Markdown .


Tak ... Patrzyłem na tę stronę, na której wymieniono wszystkie obsługiwane przez nie formaty znaczników. (Wygląda na to, że wspierają ich również w edytorze stron wiki). Przejrzałem krótko dokumentację każdego z nich, ta, której nie byłem pewien, była „pierwsza”, inne nie wyglądały zbyt obiecująco, ale może coś przeoczyłem. .. myślę, że masz rację. github.com/github/markup Najlepszą opcją może być zrobienie tego na stronie „github pages”, do której prowadzi wiki czy coś w tym rodzaju?
Chris Beck,

144

GFM obsługuje podzbiór HTML. Na razie możesz zawrzeć swoje pytanie w a, <summary>a odpowiedź w dowolnym standardowym tagu HTML, na przykład <p>i zawinąć całość w <details>tag.

Więc jeśli to zrobisz

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

Dostajesz to -> https://github.com/gaurav21r/Spoon-Knife/wiki/Read-More-Test

Obsługa przeglądarek jest problemem.

Problem z wiki GitHUB polega na tym, że pozwala na pisanie tekstu w innych formatach, takich jak AsciiDoc , RST itp. Prawdopodobnie w tych też jest rozwiązanie. Są to 2 formaty, które są znacznie bardziej bogate w funkcje niż Markdown.


74

Opierając się na odpowiedzi Gaurav i tym problemie z GH, oto sposób na użycie zaawansowanego formatowania wewnątrz <details>tagu w GitHub :

Uwaga: wymagana jest oryginalna odpowiedź z 2016 r. <p>, Od 2017 r. Tym wymaganiem jest pusty wiersz po </summary>(tj. Przed rozszerzoną treścią). Gdzieś na linii prowadzącej do 2019 r. Przecena już <summary>nie działa. Możesz zobaczyć, że jest to dość niestabilne, ponieważ jest to hack / obejście, a nie obsługiwana funkcja / przypadek użycia. Należy również pamiętać, że komentarze do wydania / PR obsługują inne formatowanie niż Wiki (np. Podkreślenie kwietnia 2020 r. W podsumowaniu działa tylko na Wiki, a nie w kwestiach).

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

Obecnie renderuje się następująco z oczekiwanymi częściami, które można rozwijać i zwijać:


Stan początkowy

wprowadź opis obrazu tutaj


Kliknij podsumowanie

wprowadź opis obrazu tutaj


Kliknij zagnieżdżone podsumowanie

wprowadź opis obrazu tutaj


8
Za ten komentarz GitHub , upewnij się, że istnieje linia między <p>i ```. W przeciwnym razie ta technika nie zadziała.
Benjamin

Masz jakiś pomysł, jak po tym uzyskać nowy wiersz? Kiedy próbuję tej techniki, zacina się ona w kolejnym akapicie. (Bez dodawania tagu <br/> mam na myśli)
Apollys obsługuje Monikę

Cóż, kiedy kopiuję dokładny kod odpowiedzi, nie pokazuje on żadnego formatowania. Coś tu jest nie tak
phil294

1
@ phil294 dzięki za powiadomienie, naprawione. Niestety, to gnije, więc wymaga pewnych korekt w miarę ewolucji GitHub. Dodano również uwagę, aby zwrócić na to uwagę.
TWiStErRob


4

Jeśli edytowanie CSSjest dla Ciebie opcją, możesz po prostu użyć

[](#spoiler "Spoiler Filled Text")

a następnie użyj (czystego), CSSaby nadać prawidłowy wygląd.

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>

(Nieco zainspirowany tym kodem )


1

Innym rozwiązaniem od tagów detali / podsumowań, ale także natywnego html jest użycie zakresu z tytułem. Ostatnio robiłem coś takiego w trybie org.

surowy tekst

wynik

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.