Jupyterlab inline syntax highlighting

I use Jupyterlab for teaching and have developed a CodeMirror mode for fenced code blocks to get syntax highlighting how I like it. I then created a Jupyterlab extension to attach this mode to Jupyterlab. However, whenever I use inline code, it has the default grey, monospaced style. Is there any way to change this? Does CodeMirror have some alter the inline code output? For fenced code, the created code tag has a class where I can apply the styles, but inline code has no class. I have tried introducing a CSS style sheet to change the attributes of the created code tag, but it doesn’t work. Any help would be appreciated.

If anyone wants the extension for a simple syntax highlighter for mathematical proofs, among other features, you can find it on GitLab.

I use Jupyterlab for teaching and have developed a CodeMirror mode for fenced code blocks to get syntax highlighting how I like it. I then created a Jupyterlab extension to attach this mode to Jupyterlab

That sounds very useful, I am sure other people would find it helpful to use it if you would like to share it.

What do you mean by inline code? Like code in the Markdown area? Could you attach a screenshot?

By ‘inline code’, I mean the code in single backquotes in a markdown cell. In the included screenshot, the coloured text is a fenced code area that uses my CodeMirror mode. I want to try and make the single backquote markdown text in a similar style. I cannot find any Jupyter or CodeMirror methods that can add this functionality.


A previous student had done this for an old version of JupyterHub by interpreting the first word after the start of backquotes, interpreting that as a syntax mode, and then injecting HTML into how the code was rendered. I don’t understand it well nor do I think it would work in JupyterLab with its better security.

Getting better programmatic control of syntax highlighting (either as-typed or as-displayed) would be really nice. The key file to understand in this case is ipythongfm.ts. That file probably needs to get a lot more modular to support some of the cases we’re talking about here… but then, it might be hard to make marked do the right thing in most cases: as in, which language should it be?

Recently, we had been discussing this over on Support extending CodeMirror highlighting with plugins · Issue #12 · agoose77/jupyterlab-markup · GitHub, specially in the context of complex multi-grammar editing experience… but we overload the built-in highlighting to work with codemirror, so it’s kinda the same thing. Anyhow: there’s some disagreement as to whether to keep fighting codemirror, or roll something else altogether.

Another avenue, which I’ve been meaning to warm back up since I can remove some monkeypatches, is jupyterlab-simple-syntax. This offers a MIME renderer for syntax highlighting, which could be emitted by any kernel.

2 Likes

In addition to the above, when it comes to Markdown, its rendering is implemented in

and while not extensible by itself, you could based of the renderer as in:

and then create a custom factory like:

and exporting it as a custom MIME renderer extension like in this cookie cutter: GitHub - jupyterlab/mimerender-cookiecutter-ts: Cookie cutter for JupyterLab mimerenderer extensions using TypeScript

As for customising the behaviour you would want to adjust how marked converts tokens.