1

I was wondering if it's possible to have a "spoiler text", that is, differently from this question, a text only visible when the mouse hover on it, in GitHub Flavored Markdown.

I've tried something along this way, but it does not work.

<p>Lorem ipsum <span id="hidden_text" style="visibility: hidden;" onmouseover="document.getElementById('hidden_text').style.visibility='visible';">hidden stuff hidden stuff</span> text text text</p>

EDIT:

While trying to figure out the problem, I found out in the GitHub repo of GFM that the html is heavily sanitized. So, I'm even more curious to know if it's possible to obtain this behavior.

CcmU
  • 780
  • 9
  • 22

1 Answers1

0

You may be able to embed your CSS inside a SVG file, as described on this site. In fact you may also be able to also just put your full code above directly in the SVG and then just embed it.

So something like this may strangely work.

Create a svg in your repo with something like this:

<svg fill="none" viewBox="0 0 800 400" width="500" height="70" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">

    <p>Lorem ipsum <span id="hidden_text" style="visibility: hidden;" onmouseover="document.getElementById('hidden_text').style.visibility='visible';">hidden stuff hidden stuff</span> text text text</p>

    </div>
  </foreignObject>
</svg>

And then in your markdown file in the repo, add something like this:

<img src="fileyoumadebefore.svg" width="500" height="70">

EDIT: In testing this myself, I see it will be necessary to style the text as well, otherwise it turns out super small. You'll need to play around a bit. And perhaps it is more feasible formatting wise to just place the CSS in the svg as per the linked site and keep your html in the markdown file. (Just not sure if GitHuB will sanitize out your onmouseover as well.)

lakeside
  • 49
  • 6