Missing syntax highlighting for the JSON viewer

[jtpio]

As noticed in #6566 (comment), syntax highlighting is missing when opening JSON files with the JSON viewer:

[kostyafarber]

This looks interesting. Any ideas on where to get started with this?

[kostyafarber]

Can't seem to locate where this bug is originated. I can see some inline styles being generated in JupyterLab for the same viewer but don't know why they aren't doing the same in the notebook 🤔

[jtpio]

Thanks @kostyafarber for looking into this.

Right I guess the first step would be to check if the styles are correctly added to the page, as there could be one missing in notebook compared to lab (haven't looked more into it since)

[kostyafarber]

Can't seem to isolate why notebook is not applying the styles. I can see in JupyterLab style tags are produced with these ͼr styles in head but in notebook they are missing.

I can't find any reference to these in the code anywhere. They look like they are to do with CodeMirror but don't know how they are produced by it.

[fcollonval]

@kostyafarber for CodeMirror 6, the theme uses CSS in JS (see documentation). That way is usually combined with auto-generated class name (as you are seeing). But they are never mentioned explicitly in the code (as they should never be used and can change without notice).

So if in notebook you can see the style applied have colored defined like var(--jp-mirror-editor-keyword-color). This means the JupyterLab CodeMirror theme is correctly applied by the JSON viewer. But those CSS properties are not define on the page - they should come from the theme package:

https://github.com/jupyterlab/jupyterlab/blob/9ee65ca27712b19cb8a7a2f4e99453ef1439a525/packages/theme-light-extension/style/variables.css#L335

[kostyafarber]

@fcollonval okay, I can see these styles in the debug console on notebook.

I can even see the ͼ12 styles attached to the spans in the JSON (which are the styles that have colours applied to them in Lab), but there are no styles defined on them in notebook.

It looks like these styles are being extracted by this function here:

https://github.com/jupyterlab/jupyterlab/blob/3dadf14e4411c3af143f97d055b3309901216ad7/packages/json-extension/src/component.tsx#L37-L39

And being called here for example:

https://github.com/jupyterlab/jupyterlab/blob/3dadf14e4411c3af143f97d055b3309901216ad7/packages/json-extension/src/component.tsx#L82-L84

But these styles aren't being produced on notebook. Not sure how to map that to a missing css import on the page. Is there meant to be an extra css file defined somewhere here to enable this function to work properly in notebook?

https://github.com/jupyter/notebook/blob/main/packages/application/style/index.css

[fcollonval]

Ok I think I get what is happening - the CodeMirror theme rules are not added to the page because there are no CodeMirror editor.

[fcollonval]

What we should do is add the CodeMirror rules on the page for the JSON Renderer.

https://github.com/jupyterlab/jupyterlab/blob/42992295a40e030d7875ab063aa8ebb1ada3ca74/packages/json-extension/src/component.tsx#L38

You can do that by adding manually the style using style-mod:

StyleModule.mount(document, jupyterHighlightStyle.module)

[kostyafarber]

Ah okay , as there is no CodeMirror Editor on the JSON Renderer. Thanks for the investigation @fcollonval

Should this PR be done in JupyterLab and then I can reference this issue there?

[fcollonval]

StyleModule is designed to add a style sheet only once. So I would suggest fixing it upstream.

[kostyafarber]

Sorry if this is a silly question, but what do you mean by fixing it upstream?

[fcollonval]

Sorry fixing it in JupyterLab itself

[kostyafarber]

All good! Thanks for the help 😄

[fcollonval]

We usually refer to JupyterLab as the upstream of notebook as notebook v7 is a remix of JupyterLab plugins.

[kostyafarber]

Ah okay. Thanks for that. Good to know the lingo.

I'll work on it and open a PR upstream and reference this issue.