search

showdownjs / showdown

A bidirectional Markdown to HTML to Markdown converter written in Javascript
http://www.showdownjs.com/
MIT License
14.26k stars 1.56k forks source link

Spoiler tags? #923

Open amytimed opened 2 years ago

amytimed commented 2 years ago

I think spoiler tags would be a great addition to this project!

The syntax could be ||text|| or >!text!<, maybe even both!

This would require some use of CSS and Extra JavaScript, but I think that'd be worth it.

What do you think?

bandantonio commented 2 years ago

Spoiler tags (details and summary) are out of the scope of the common Markdown syntax (and I believe it should stay like that). But you can easily extend your project to support them via the lang extension:

{
    type: 'lang',
    regex: /\|\|([\S\s]*?)\|\|/g,
    replace: '<details><summary>Click for more details</summary>$1</details>'
}

Markdown:

||Some details that you want to be available when expanding the spoiler||

Resulting HTML:

Screen Shot 2022-04-30 at 16 52 28 Screen Shot 2022-04-30 at 16 52 36

Related to #761

amytimed commented 2 years ago

Yeah, but I was referring to spoiler text in black that you click and which doesn't open or close.

Maybe extreme CSS could Solve My Issue

bandantonio commented 2 years ago

Ah, ok, I see. Well, you can still use an extension here to assign a specific class to the tags of your choice (|| or >!) and then toggle black overlay over the text using a bit of javascript and css