Monaco-editor: Is it possible to use the language highlighter from the commandline?

[mojavelinux]

Is it possible to use the language colorizer from the commandline? We want to be able to use the same language definition for development and for the documentation. But this would require integrating the language colorizer into a static site build (also based on node.js). Atom did something similar by extracting highlights out of the core. Would you (or have you) considered doing the same? I'm just looking for some pointers about what would be required.

[mojavelinux]

If this question should be posted elsewhere, just let me know.

[akosyakov]

There is monaco.editor.colorizeElement to colorize a content of some HTMLElement.

[mojavelinux]

Yep, I saw that API. The question is, what needs to be done to bootstrap the editor from the a commandline script, or is there a way to bypass loading the whole editor just to get at that method?

[mojavelinux]

After all, you must need something like that to unit test the language definitions anyway, right?

[sgomes]

I'm also interested in this. I'd love to use Monaco's syntax highlighter as part of my static site building pipeline, but monaco-editor needs to be run in a browser environment (loading vs/editor/editor.main makes an immediate call to navigator.userAgent, for example).

Extracting monaco.editor.colorize into something that could be run in a node environment would be amazing!

[alexdima]

:+1: The colorization engine is browser agnostic, this is just a packaging problem.

[mojavelinux]

@alexandrudima Any hints about how to do that? What needs to be done to bootstrap the editor from the a commandline script? Even some pseudo-code would help.

[alexdima]

Here are the tricks I do for testing monaco-languages under nodejs:

• a packaged npm version is consumed (this is the editor.main.js that contains code that looks for browser related things)
• define some browser things the editor probes for -- https://github.com/Microsoft/monaco-languages/blob/master/test/all.js#L1 with the help of jsdom-no-contextify
• then, the relevant languages must be loaded -- https://github.com/Microsoft/monaco-languages/blob/master/test/testRunner.ts#L32
• finally, if all of the above works out, monaco.editor.tokenize can be used.

But yeah, this thing is not packaged as a server-side colorizer, so this is all pretty crazy just to get colorization working... The alternative would be to start from sources (compile them with TS to the /out folder in VS Code) and then load only the needed code to get colorization working. A good entry point would be the Colorizer, like it is used here.