Syntax highlighting for cells depending upon selected language

JupyterLab extensions
, ,
1

Hi folks, I’ve created an extension to allow for interactively running interoperable Python and SQL code. The way the UI works is:

  1. Users can select from a dropdown which code they want to run (python or sql)
  2. We load the code to be run in cell metadata

And it works fine thanks to all the help from the community. Now i’ve been trying to enable syntax highlighting for jupyterlab. I’ve tried searching across this forum, on SO and on the Github but the solutions being pointed out at all require running JS which as far as I know isnt supported or allowed in a Jupyterlab environment.

Would be awesome if someone could help with how I could achieve syntax highlighting with SQL

2

Yes, you definitely will need to write some extension JS/TS for JupyterLab to affect syntax highlighting.

Without understanding a lot more (is this a kernel? an kernel extension?), if you control the mime type of the document, you might be able to get away a multiplexing mode for CodeMirror 5, which would work with JupyterLab <=3. Here is an example of a packaged standalone mode.

There might be some tricks required to figuring out which cell you are in, as typically all the syntax highlighter will know is the text.

In JupyterLab >=4, CodeMirror 6 is being adopted for performance, support, and accessibility, and number of things will work differently. As that is still in alpha, and will also be underpinning Notebook 7, now would be a great time to get that opinion raised.

1 Like
3

Hi @bollwyvl we already have a kernel extension that contains logic to understand whether to run sql/python based on the dropdown.

This is a Jupyterlab Frontend Extension to based on the value of the dropdown, allow for SQL Syntax highlighting

Can you guide me through how i could achieve the SQL highlighting for a Jupyterlab Notebook cell with CodeMirror? I took a look at the example package that you linked but wasn’t able to understand how it works

What I want to achieve is:

For the text area in the notebook cell in “code” mode to also detect and highlight SQL code

4

You’d want to get your head around “any old extension” development:

https://jupyterlab.readthedocs.io/en/stable/extension/extension_dev.html

With some key resources:

At which point you’d be better able to interpet an existing syntax extension. Some more resources there: