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 https://github.com/exercism/bqn/issues/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.

[ErikSchierboom]

Not really, the snippet of code I've linked above can be run on server at the time of static site generation

Yes, but we're running Ruby, not JavaScript on our backend. We could shell out to Nodejs to run code, but that would also mean getting a performance hit.

While we appreciate your thoughts on this, we won't be replacing highlightjs with codemirror. Highlightjs has worked great for us, is more performant than codemirror and supports more languages.

[andreypopp]

not really pushing on anything, just tried to provide factually correct information about what codemirror highlighting infra is :) sorry for the noise

[ErikSchierboom]

No problem. Thanks.

[gitonthescene]

@ErikSchierboom So it looks like we have a published codemirror plugin to register. Is there anything we should do to test the plugin once it's been added.

[ErikSchierboom]

We'll add the track to the website, but still inactive. That way you'll be able to test the track without any students being able to access the track. I'll let you know when I've had time to do so.

[gitonthescene]

Super. Thanks very much.

[razetime]

started a highlightjs plugin. React with a thumbs up to this message if you'd like contributor access.

[ErikSchierboom]

@gitonthescene See https://github.com/exercism/website/pull/3165

[gitonthescene]

@ErikSchierboom Thanks for doing this. I’m traveling at the moment but will have a look at what’s up when I’m back.

[razetime]

so. both codemirror and a highlightjs plugin are complete. Do I have to get an npm package in?

[razetime]

have published it at https://www.npmjs.com/package/highlightjs-bqn. Hopefully it works correctly with the highlightjs node plugin.

[ErikSchierboom]

@razetime Seems to be working. I've opened a PR: https://github.com/exercism/website/pull/3397 You'll need to update the config.json to change the highlightjs language to bqn.

[ErikSchierboom]

PR has been merged!