Syntax highlighting

[gitonthescene]

It’s probably worth having separate issues for subtasks of the main issue. I’ll transfer info from the main issue here.

[gitonthescene]

• @ErikSchierboom Outlined the basic ask here
• @razetime pointed at a codemirror plugin we might be able to use wholesale.

[gitonthescene]

@ErikSchierboom - Is there any doc you can link to to show exactly where these hooks are?

Searches under exercism/ for “syntax” and “highlighting” turned up nothing. Search for “codemirror” turned just this wren related project. A search for “editor” resulted only in that same link.

[ErikSchierboom]

@gitonthescene The highlightjs configuration is in the config.json file. It is mentioned as part of the "Prepare for launch" document which is linked to in #1.

The codemirror plugin loading is done here: https://github.com/exercism/website/blob/main/app/javascript/components/misc/CodeMirror/languageCompartment.ts

[gitonthescene]

@ErikSchierboom - Awesome! Thanks very much.

Am I right to read this as meaning the language must be registered at highlight.js since it’s a required field?

It looks like there are a few ways to register the codemirror plugin. I’ll have a look to see which fits our circumstances.

[gitonthescene]

@ErikSchierboom - FWIW, it looks like searching at the org level defaults to looking for repository names. I needed to switch to the Code tab to find the info you linked. Thanks again.

[ErikSchierboom]

Am I right to read this as meaning the language must be registered at highlight.js since it’s a required field?

No, it could also be a highlightjs plugin, it doesn't have to be registered anywhere (well, except for NPM).

[andreypopp]

just FYI, it's possible to reuse codemirror highlighting to highlight static text (outside of codemirror editor), example code here.

[gitonthescene]

@andreypopp - This sounds like how Exercism itself should be set up rather than requiring two different methods.

@ErikSchierboom - Perhaps this could be a fallback method here.

[ErikSchierboom]

What do you mean?

[gitonthescene]

@ErikSchierboom - I’m not sure where the confusion is. Instead of using highlight.js in the linked file we could just use the codemirror plugin as suggested in the code that @andreypopp linked above.

Is there any reason not to use the codemirror plugin for stand-alone highlighting?

Obviously allowing this doesn’t preclude using highlight.js when it has been configured. But reusing the codemirror highlighting ensures consistency in addition to being less work.

[iHiD]

Is there any reason not to use the codemirror plugin for stand-alone highlighting?

Yes. We use highlight.js for static syntax highlighting on the website. We don't want to load a JavaScript component in everytime we render a piece of static code.

You also need codemirror for the online editor, but that's a different thing.

[gitonthescene]

@iHiD Is it really that much overhead over loading highlight.js? Again, using the same component ensures consistency.

[iHiD]

The overhead would be loading codemirror. But yes, turning every place that solutions are rendered on the site into JavaScript components rather than just HTML would be a big increase. Consider that we have pages everywhere of dozens of solutions: https://exercism.org/profiles/ErikSchierboom/solutions - all of the rendering for those would move client-side, and thus would be slower, would be worse for SEO, etc.

[andreypopp]

all of the rendering for those would move client-side, and thus would be slower

Not really, the snippet of code I've linked above can be run on server at the time of static site generation, you'd need to change callback to produce HTML strings instead of build DOM nodes. That way there won't be any codemirror code loaded at runtime.