Jq syntax highlighting

Programming jq
1

I’ve written a very simple syntax highlighter for jq for CodeMirror 6:

It doesn’t actually tokenize for valid syntax like many other Lezer highlighters do, it just looks for keywords, numbers, strings, etc. and highlights them. (It might be buggy, issues/PRs are of course welcome!) Here’s a simple demo with CM6 and the highlighter: https://nsjwjz.csb.app/

Could something like this be added to Exercism? I’d appreciate it when coding in jq :slightly_smiling_face:

1 Like
2

Exercism’s web editor relies on Highlight.js for syntax highlighting. Any highlighting that shows up in the editor needs to show up there, first. If you’d like to add a language, that’s where you need to look.

3

The editor is codemirror 6 actually so this looks good for that :slight_smile: The snippets etc use higlightjs.

3 Likes
4

Yeah the highlight.js is separate, but I might work on a highlighter for that too.

5

Here’s a jq syntax highlighter for highlight.js

Demo: Vite (forked) - StackBlitz

1 Like
6

That’s fantastic. Thanks for doing that.

@iHiD I’ve already got .online_editor.highlightjs_language = "jq"
I suppose these packages need to be added to the website package.json, and jq snippets need to be regenerated?

7

I think the third-party highlight.js packages need included in website/app/javascript/utils/highlight.ts at 88523ce24bfeaec936dfab12a6dfa42f31b168b6 · exercism/website · GitHub

And the CM6 package in website/app/javascript/components/misc/CodeMirror/languageCompartment.ts at 88523ce24bfeaec936dfab12a6dfa42f31b168b6 · exercism/website · GitHub

8

No, snippets are highlighted JIT in the browser. Once they’ve been merged, then we should be good to go.

9

I’ve asked @dem4ron to take a look :slight_smile:

1 Like
10

Thank you for your contributions. Both packages look really good and work well. Unfortunately, I can only add the hljs one for now, because we still use Codemirror 6’s ^0.19.0 version. It is planned to upgrade CM6 to ^6.0.0 , but a lot of things can break, and it requires some time to fully test it and replace the breaking parts.

The reason we can’t resolve a different version of libraries in your dependencies is that @codemirror/highlight has been split between @lezer/highlight and @codemirror/language , and we still need the former.

In the meantime, a possible solution could be publishing another version of your lang-pack that is built on top of @codemirror/highlight and @codemirror/language , both ^0.19.0 , instead of your current ones: @codemirror/language": "^6.0.0" and @lezer/highlight .

A good starting point could be the exercism/codemirror-lang-gleam repo.

Actually, don’t waste your energy on this. I’ll start updating CM6 to ^6.0.0. After doing some research, it might not take that much time. :)