Syntax highlighting JSX by itself?

[Jorenm]

I have some files that contain nothing but JSX, no React component wrapping it. I get very wonky syntax highlighting out of this plugin:

https://imgur.com/a/C5qJGj4

You can view the same issue at your React demo by replacing the contents of the editor with this code:

<div className={styles.footer}>
	<div className={styles.grid_container}>
		<div className={styles.blurb}>
			<a href="/" title="home page"><Image alt="logo" src="/images/small_logo.svg" width="31" height="32" /></a>
			<p>lorem ipsum dolar sit.</p>
		</div>
	</div>
</div>

Is there a way to get it working highlighting JSX on its own?

[luminaxster]

Thank you for letting me know, I fixed the issue, I will publish it before the end of the day. It will look like this:

[luminaxster]

Version 1.0.[5] is out now, give it a try =). I tried everything to make JSX work fully in Monaco, @Jorenm. To no avail. So... "Fine, I'll do it myself". Even JsCodshift had errors, like the one you pointed out. I took away the intermediary and went for the head, Babel.

[luminaxster]

If you only need to colorize JSX brackets, try this:

//adapted from monaco playground
// Register a new language
monaco.languages.register({ id: 'JSX' });

// Register a tokens provider for the language
monaco.languages.setMonarchTokensProvider('JSX', {
	tokenizer: {
		root: [
			[/<(\s*\/)?|(\/\s*)?>/, "JSXBracket"],
		]
	}
});

// Define a new theme that contains only rules that match this language
monaco.editor.defineTheme('JSXTheme', {
	base: 'vs',
	inherit: true,
	rules: [
		{ token: 'JSXBracket', foreground: '508080' },
	]
});

// Register a completion item provider for the new language
monaco.languages.registerCompletionItemProvider('JSX', {
	provideCompletionItems: () => {
		var suggestions = [{
			label: 'simpleText',
			kind: monaco.languages.CompletionItemKind.Text,
			insertText: 'simpleText'
		}, {
			label: 'testing',
			kind: monaco.languages.CompletionItemKind.Keyword,
			insertText: 'testing(${1:condition})',
			insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet
		}, {
			label: 'ifelse',
			kind: monaco.languages.CompletionItemKind.Snippet,
			insertText: [
				'if (${1:condition}) {',
				'\t$0',
				'} else {',
				'\t',
				'}'
			].join('\n'),
			insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
			documentation: 'If-Else Statement'
		}];
		return { suggestions: suggestions };
	}
});

monaco.editor.create(document.getElementById("container"), {
	theme: 'JSXTheme',
	value: getCode(),
	language: 'JSX'
});

function getCode() {
	return `    
let     XX =(<div>
</div>);
    `;
}