Stack Snippets messing with JS?

Question

I've noticed that my Red vs. Blue Sandbox controller snippet here has stopped working (at least in Chrome).

This is incredibly strange because the JSFiddle that is exactly identical is working fine. More importantly, if you go to the edit mode for the meta question, the snippet works fine when you click Run code snippet in the render preview, or if you click edit the above snippet → Run.

The error that the browser gives is

Uncaught SyntaxError: Unexpected token ILLEGAL

this makes perfect sense when you look at the JavaScript causing it:

var battle, redTeam, blueTeam, interval

1385d3a1-d76e-4049-926f-d58c6ff78ba5('#showCircles')
    loadEntries()
})

I have no idea where the 1385d3a1-d76e-4049-926f-d58c6ff78ba5 came from. The code should look something like this:

var battle, redTeam, blueTeam, interval

$(document).ready(function() {
    ctx = $('#canvas')[0].getContext('2d')
    moveCounter = $('#moveCounter')
    showNames = $('#showNames')
    showCircles = $('#showCircles')
    loadEntries()
})

The edit page has the correct code but the real question doesn't.

I'm guessing it has something to do with jQuery or MathJax because of the $ involved.

Interestingly, the official question snippet works fine. The code there is minified though so this may not be that surprising.

Any clue what's going on?

(Not sure but a similar error may be happening here.)

Answer 1

This is a MathJax-related issue. Here are some very short snippets that reproduce the bug, which appears to occur whenever multiple dollar signs are placed in a single code block:

$foo
$bar
$baz

and

$
foo
bar
baz
$

Note that the original source of this answer does not include any extra indentation, yet the rendered HTML does show it.

According to a comment by @m0sa, Stack Exchange developer:

I looked into it, turned out to be a deep rabbit hole requiring at major refactoring of MarkdownSharp (we'd need to make the pipeline extensible, so we could inject stuff before DoCodeBlocks in RunBlockGamut - currently all the processing happens before we ever hit MarkdownSharp, but we'd need to leverage it's block processing)

So, it's unlikely that this will be fixed any time soon (ugh).

Unfortunately, the answer is just "use jQuery or some other alias in your code instead of $" until this is fixed.

Answer 2

On the meta only, I have edited the MathJax delimiter to use \\( and \\). Let me know if this allows your snippets to work better!

Testing alternative MathJax invocation syntax: \(\sqrt{x^2+y^2}\)

Display mode still works:

\[\sqrt{x^2+y^2}\]

Another test from Martin:

abc$
    $def
$$ab
    de$$
\(ab
de\)
\[ab
de\]

Answer 3

Not sure if this has been fixed, it's not showing up in the edit box

$foo
        $bar
$baz

(no, it's not fixed, $bar has additional indentation than what I saw in the edit!)

There is a similar issue on Music Stack exchange, where unwanted guitar chords pop up. The workaround is to use <pre> and </pre> tags around content you don't want mangled. This also means you don't need to include 4 leading spaces in front of your code.

(Yes, works!)

$foo
    $bar
$baz

(Please click the edit button to see exactly what I have done.)