How to use themes with the new Code node

[niosus]

While a new Code node is fantastic I was wondering if it is possible to use some pre-defined code highlight theme from the ones available in the typical text editors, e.g. Monokai. As of now, there is a default theme coming from LezerHighlighter and I was not able to find any other pre-defined themes. While it is possible to set up custom themes, it would be nice to have some available by default. Am I just missing some setting?

[brend32]

If you want you can install Shiki code highlighter. It supports a lot of languages and has many themes.

brend32@942735a

[aarthificial]

@brend32 Instead of forking the repo you should consider releasing the highlighter as a standalone npm package.
This would let people easily install it in existing projects and would open the door to upstreaming it here in the future.

[niosus]

As a non-expert in this, I would prefer a way to enable themes in the framework and while the way suggested by @brend32 is helpful, it feels like there might still be a way to enable themes out of the box in Motion Canvas directly, what is your take on this @aarthificial?

[aarthificial]

I'm not sure what you mean by

enable themes out of the box in Motion Canvas directly

Motion Canvas ships with only one default theme. The LezerHighlighter accepts a custom HighlightStyle so that people can use any CodeMirror theme they want.

For example, here's a CodeMirror theme for Monokai:
https://www.npmjs.com/package/@uiw/codemirror-theme-monokai

You can install it in your project:

npm i @uiw/codemirror-theme-monokai

And then use it when defining your LezerHighlighter:

import {parser} from '@lezer/javascript';
import {monokai} from '@uiw/codemirror-theme-monokai';

const Highlighter = new LezerHighlighter(parser, (monokai as any)[1][2].value);

We could provide a helper function to make the (monokai as any)[1][2].value construction less awkward.
But other than that, I don't really see the reason for bundling every single theme that people may need with Motion Canvas given that the CodeMirror ecosystem has plenty of them already.

[niosus]

This looks great! That is exactly the reason why I added the documentation label to this issue at first, could we maybe add this to the docs for the noobs in type script like myself? I feel this tiny tutorial belongs in the docs of Motion Canvas to make it an even more complete package. Thoughts?