Getting syntax highlighting to work for custom cell magic

JupyterLab extensions
1

Hey there,

I have a built a package to compile and run C/C++ and FORTRAN sources in a jupyter notebook cell using custom cell magics.

The cell magics are %%CPP %%C and %%FORTRAN.

I can’t seem to get proper syntax highlighting for the cell magics in JupyterLab. This code enables syntax highlighting for ordinary Jupyter notebooks if I put it in ~/.jupyter/custom/custom.js

IPython.CodeCell.options_default.highlight_modes[‘magic_text/x-c++src’] = {‘reg’:[/^%%CPP/]} ;
IPython.CodeCell.options_default.highlight_modes[‘magic_text/x-csrc’] = {‘reg’:[/^%%C/]} ;
IPython.CodeCell.options_default.highlight_modes[‘magic_text/x-fortransrc’] = {‘reg’:[/^%%FORTRAN/]} ;
IPython.notebook.events.one(‘kernel_ready.Kernel’, function(){
IPython.notebook.get_cells().map(function(cell){
if (cell.cell_type == ‘code’){ cell.auto_highlight(); } }) ;
});

I’m trying to do the same thing for Jupyterlab. I used cookiecutter to create a template Javascript extension but I quickly found myself in the stratosphere of complexity and not sure what to do now to get syntax highlighting to work. Perhaps you could have a look at jupyterlab_compiler_magics/index.js at c2c4b77f33341824785c075fa3469c828a8c67fb · drtpotter/jupyterlab_compiler_magics · GitHub and let me know what needs to be there. Any suggestions would be helpful!

Kind regards,
Toby

1 Like
2

Here’s an in-the-wild example:

And a defunct example:

1 Like
3

^ describes adding of mode itself.

For dynamic changes of mode depending on cell content, like the use of %%CPP magic, jupyterlab-lsp is one option. Or you could write an extension which re-uses the relevant bits of jupyterlab-lsp. Or we could make it into standalone extension within LSP to let users install it as it seems a common question.

4

Good suggestions, I’m still not sure how to proceed but it seems that this use case is pretty common and could go into a feature request. All that we need is a way to apply CodeCell’s syntax highlighting for any of its supported languages to any cell magic of our choosing.

5

So one option is to mirror Bigquery magic by julioyildo · Pull Request #553 · jupyter-lsp/jupyterlab-lsp · GitHub and send a pull request to jupyterlab-LSP and we could include this in the next release (here is a PR with some screenshots: Syntax highlighting by krassowski · Pull Request #319 · jupyter-lsp/jupyterlab-lsp · GitHub). You will need to find out names of CodeMirror modes (possibly here: CodeMirror: C-like mode) and of the Fortran mode. The regular expressions may be much simpler if the magics do not have any arguments.

The real treat is that once someone adds a spec for C/C++/Fortran language server you will also get much, much more coding assistance (advanced autocomplete, linting, etc) for free. See add Pyright langserver spec by yuntan · Pull Request #587 · jupyter-lsp/jupyterlab-lsp · GitHub for an example of a PR adding a spec.

2 Likes
6

Yes, I forgot to mention the LSP path, which is becoming increasingly viable. I’d personally also be happy to help in getting more (open source) language servers packaged on conda-forge, as that’s where we draw our test dependencies (if possible) for jupyter-lsp.

1 Like
7

Ha:

1 Like
8

By the by, fortran-language-server is now up on conda-forge…

1 Like
9

Any news about an easy way to do it? I want support for the iTikZ magic extension: iTikZ GitHub Repository. TikZ is essentially LaTeX images (text/x-stex acorrding to CodeMirror: sTeX mode).

EDITED:

I found an easier solution to add support to highlight a custom magic cell that uses an existing language server in jupyterlab-lsp. The example below extending latex syntax.

  1. Go to extractors.ts and find these lines:

Now add support to itikz and tikz magic cells:

    new RegExpForeignCodeExtractor({
      language: 'latex',
      pattern: '^%%(latex|itikz|tikz)( .*?)?\n([^]*)', 
      foreignCaptureGroups: [3],
      isStandalone: false,
      fileExtension: 'tex'
    }),

Please comment if you know how to improve my solution.

1 Like
10

Hello, I’m reopening the topic. I use Jupyter notebooks to write Arduino sketches. To do this, I created a magic command %%sketch. To get the correct syntax highlighting, I used the following instructions:

from IPython.core.display import display_javascript
display_javascript("IPython.CodeCell.options_default.highlight_modes['text/x-c++src'] = {'reg':[/^%%sketch/]};", raw=True)

This worked like a charm. Unfortunately, I’ve just updated to the latest version of Jupyter Notebook and it no longer works. If I understand correctly, this change occurred in version 7.

Now, my question is: Is there a simple way (similar to the previous one) to achieve this with the newest versions? I’m a beginner, and I’m just starting to explore JupyterLab, which I’m discovering with this update (I previously only used Jupyter Notebook).

Thanks in advance for your help!

11

Jupyter Notebook 7+ versions, and going forward, are now built on JupyterLab components. See the second half of my post here for more information with links to resources.

So you have to use JupyterLab-compatible approaches now, which I think means given this thread and the comments to this post the possible options are already covered here.

12

Thank you for the prompt response. If I understand correctly, one solution is to use Jupyter-LSP. I will give it a try.

1 Like