Syntax highlighting on the website is broken

[nilslindemann]

Hi people,

Paste the first code example from https://stackoverflow.com/a/56926044 into the online version. It breaks the syntax highlighting. It will just partially improve when making a change.

Furthermore, it does not make sense how it highlights. E.g. remove/re-add the empty line in line 5 and this will change the highlighting of lines 6 to 14. Both do not look valid, e.g. the brackets:

Sometimes the highlighting also, seemingly randomly, (just in Chrome?) changes to a nearly all-orange version, but I cannot reproduce this right now.

Tested in Firefox and Chrome on Win 10.

Thanks for Peggy and greetings.

[hildjj]

I'll take a PR for this, but am unlikely to fix it myself. I've been trying to get a rewrite done to move us to Monaco, but it's been relatively low on my priority list, unfortunately.

[nilslindemann]

Aside of moving to Monaco, one can fix the grammar and merge it together with the codemirror.js. I do not know how to do the latter.

Meanwhile, a simple workaround is to replacemode: "pegjs" with mode: "javascript" in the online.js and, for example, add a style .cm-variable {color: steelblue;} to the site. The resulting highlighting does not look very different, and it removes the errors, as the syntax is close enough to JavaScript:

If you are interested in that workaround, I create a PR.

[nilslindemann]

Hmm, yeah okay, it is not perfect, e.g. the return is not highlighted in the default code example.