[spoiler] tags don't work on code blocks


(Nick Winter) #1

For the CodeCombat forum, we have a lot of players posting their code to solve our levels. It would be great if we could use [spoiler] tags so that they aren’t giving away the answers to players who don’t want to see. It works with single line code:

[spoiler]`var singleLineCode = "some code";`[/spoiler]

var singleLineCode = "some code";

Edit: actually, I don’t know why I missed this, but it doesn’t work on single-line code either (no code formatting).

But indenting by four spaces on multiline code doesn’t work (the spoiler works, but not code formatting):

var multiLineCode = "some code with no code formatting";
while (true)
    multilineCode += "some more code, wish it looked like code";

Surrounding with triple backticks (our preferred method) makes code formatting work, but breaks the spoiler:

var multiLineCode = "some code that should be spoiled";
while (true)
    multilineCode += "some more code, you can't unsee it";

Would love it if the spoiler tag could support code blocks!


(Jeff Atwood) #2

Good news!

You can use the new hidden/expanding support, which is included in Discourse 1.3 beta and leverages upcoming HTML 5.1 tags.

super seekrit code block
var multiLineCode = "some code that should be spoiled";
while (true)
    multilineCode += "some more code, you can't unsee it";
super seekrit code span

i = i + 1

Like so

[details=super seekrit code block]
```
var multiLineCode = "some code that should be spoiled";
while (true)
    multilineCode += "some more code, you can't unsee it";
```
[/details]

[details=another super seekrit code block]`i = i + 1`[/details]

(Nick Winter) #3

Awesome, works great–thanks!


(Joachim Brehmer) #4

Hi, Moderator from CodeCombat here.
I already broke it, apparently it doesn’t like nested details:


outer

Before inner

inner

Inside inner

After inner


Spaces for details again:

[details=outer]
Before inner
[details=inner]
Inside inner
[/details]
After inner
[/details]

(Jeff Atwood) #5

How is that broken? Nesting is not supported, why would you expect it to be?


(Kane York) #6

It’s a CSS bug, only on Firefox. There’s text outside a <p>.

@zogstrip I think it should be more like this:

details {
  display: block;
  &:not([open]) {
    display: none;
    summary {
      display: block;
    }
  }
}

And not details > *.


(Jeff Atwood) #7

Oh my bad if it is Firefox only, we should fix. Does work ok on mobile safari.


(Régis Hanol) #8

Thanks @J_F_B_M for reporting that issue. I just pushed a fix :turtle:


(Steven Greco) #9

I cant seem to get this to work on my site. I pulled the latest commits from git and did a rebuild app but no luck. It does not look like its recognizing the tags.


#10

Did you install the plugin?


(Steven Greco) #11

Wow. Cant believe I did not think of that. Thought it was built into the
master. I’m dumb.


(Régis Hanol) #12

Took me 561 days to fix it but I did it :blush:


(Eli the Bearded) #13

Trying out the examples from the first post:

var multiLineCode = "some code that should be spoiled";
while (true)
    multilineCode += "some more code, you can't unsee it";

var singleLineCode = "some code";


(Régis Hanol) #14