Support for Spoiler #499

New Issue

claunia · 2026-01-29T14:38:13Z

claunia commented

2026-01-29 14:38:13 +00:00

Originally created by @magicjar on GitHub (Feb 14, 2022).

Is there any support for spoiler?

Maybe like StackOverflow spoiler using >! which is basically just a <blockquote> with a .spoiler class?

Originally created by @magicjar on GitHub (Feb 14, 2022). Is there any support for spoiler? Maybe like StackOverflow spoiler using `>!` which is basically just a `<blockquote>` with a `.spoiler` class?

claunia added the question label 2026-01-29 14:38:13 +00:00

claunia closed this issue

2026-01-29 14:38:13 +00:00

claunia commented

2026-01-29 14:38:14 +00:00

@xoofx commented on GitHub (Feb 14, 2022):

You can use custom containers for spoilers

@xoofx commented on GitHub (Feb 14, 2022): You can use [custom containers](https://github.com/xoofx/markdig/blob/master/src/Markdig.Tests/Specs/CustomContainerSpecs.md) for spoilers

claunia commented

2026-01-29 14:38:15 +00:00

@Abrynos commented on GitHub (Apr 10, 2024):

For posterity I will post an example using bootstrap accordions here:

:::spoiler {.accordion}

::::header {.accordion-item}

<h2 class="accordion-header no-link" id="exampleHeading">
    <button class="accordion-button collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#exampleBody"
            aria-expanded="false"
            aria-controls="exampleBody">
        This is the title of the spoiler
    </button>
</h2>

:::::body {.accordion-collapse .collapse #exampleBody arial-labelledby=exampleHeading}

::::::content {.accordion-body}

This is the content

::::::

:::::

::::

:::

Resulting html:

<div class="accordion spoiler">
  <div class="accordion-item header">
    <h2 class="accordion-header no-link" id="exampleHeading">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleBody" aria-expanded="false" aria-controls="exampleBody">
        This is the title of the spoiler
      </button>
    </h2>
    <div id="exampleBody" class="accordion-collapse collapse body" arial-labelledby="exampleHeading">
      <div class="accordion-body content">
        <p>This is the content</p>
      </div>
    </div>
  </div>
</div>

@Abrynos commented on GitHub (Apr 10, 2024): For posterity I will post an example using bootstrap accordions here: ```md :::spoiler {.accordion} ::::header {.accordion-item} <h2 class="accordion-header no-link" id="exampleHeading"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleBody" aria-expanded="false" aria-controls="exampleBody"> This is the title of the spoiler </button> </h2> :::::body {.accordion-collapse .collapse #exampleBody arial-labelledby=exampleHeading} ::::::content {.accordion-body} This is the content :::::: ::::: :::: ::: ``` Resulting html: ```html <div class="accordion spoiler"> <div class="accordion-item header"> <h2 class="accordion-header no-link" id="exampleHeading"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#exampleBody" aria-expanded="false" aria-controls="exampleBody"> This is the title of the spoiler </button> </h2> <div id="exampleBody" class="accordion-collapse collapse body" arial-labelledby="exampleHeading"> <div class="accordion-body content"> <p>This is the content</p> </div> </div> </div> </div> ```

claunia commented

2026-01-29 14:38:16 +00:00

@Atulin commented on GitHub (Jan 4, 2026):

That works only for block spoilers and is incredibly verbose. There seems to be no simple solution for

this is ||secret|| text

to

<p>this is <span class="spoiler>secret</span> text</p>

@Atulin commented on GitHub (Jan 4, 2026): That works only for block spoilers and is incredibly verbose. There seems to be no simple solution for ```md this is ||secret|| text ``` to ```html <p>this is <span class="spoiler>secret</span> text</p> ```

claunia referenced this issue

2026-01-29 14:49:19 +00:00

[PR #499] [CLOSED] Random perf improvements #1066

claunia referenced this issue

2026-01-29 14:49:19 +00:00

[PR #499] Random perf improvements #1070

claunia referenced this issue

2026-01-29 14:49:24 +00:00

[PR #521] [MERGED] Random perf improvements #1077

claunia referenced this issue

2026-01-29 14:49:28 +00:00

[PR #521] Random perf improvements #1082