CODEWITHSUNDEEP
jsxmonaco-editor
Raathigesh
Raathigesh

Reputation: 2336

JSX Support in Microsoft's Monaco editor

Does Monaco editor support JSX syntax highlighting? I couldn't find any reference related to this.

Upvotes: 7

Views: 4192

Answers (2)

David I. Samudio
David I. Samudio

Reputation: 2693

TL;DR: Nope.

NL;PR:

To date (v0.20.0), it does not support JSX highlighting or commenting, it only supports syntax recognition.

UPDATE

I have a custom JSX highlighting and commenting in my project, now available as an npm package: monaco-jsx-highlighter, so I take Monaco's highlighting:

enter image description here

And customize it like this: enter image description here

You can try it live: https://codesandbox.io/s/monaco-editor-react-6o4u4?file=/src/index.js.

PREVIOUS ANSWER

Some work has been done here, but is not official and only about syntax.

It can be done, though. This tool has it working. In their repo, they add the "coloring" to it.

The whole idea is to provide a JSX tokenizer to Monaco, which can be plugged into it like in their custom tokenizer example.

CodeSandbox has a way to do it. They add a custom syntax worker that sends soon-to-be-decorations to the editor. I do the same, but I use jscodeshift to get the AST (then findJSXElements) and finally create inline decorations on content changes.

Mine looks like this: Monaco editor with JSX highlights

Upvotes: 6

cancerbero
cancerbero

Reputation: 7035

JSX syntax type checking is 100% supported by monaco-editor. Which is not, is syntax highlighting but it can be accomplished by parsing JSX with a worker that uses TypeScript compiler and using monaco.editor.deltaDecorations() to add HTML classes to JSX related tokens and adding CSS to colorize them.

For type checking you need to use TypeScript language, configure TypeScript compiler options and provide JSX typings (React's for example).

For both things, here are some instructions I've written: https://github.com/cancerberoSgx/jsx-alone/blob/master/jsx-explorer/HOWTO_JSX_MONACO.md

Here a working demo: https://cancerberosgx.github.io/jsx-alone/jsx-explorer/

Enjoy

Upvotes: 8

Related Questions