showdown icon indicating copy to clipboard operation
showdown copied to clipboard

Spoiler tags?

Open aMyTimed opened this issue 2 years ago • 3 comments

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?

aMyTimed avatar Apr 30 '22 01:04 aMyTimed

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

bandantonio avatar Apr 30 '22 14:04 bandantonio

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

aMyTimed avatar May 02 '22 11:05 aMyTimed

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

bandantonio avatar May 02 '22 15:05 bandantonio

i could do it in css only (excluding extension code)

aMyTimed avatar May 02 '22 23:05 aMyTimed