Sublime Forum

Problem code highlighting esnext code

#1

I have this code:

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';

const blockStyle = {
	backgroundColor: '#900',
	color: '#fff',
	padding: '20px',
};

registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
	title: __( 'Example: Basic (ESNext)', 'gutenberg-examples' ),
	icon: 'universal-access-alt',
	category: 'layout',
	example: {},
	edit() {
		return (
			<div style={ blockStyle }>editor.</div>
		);
	},
	save() {
		return (
			<div style={ blockStyle }>Hello World, step 1 (from the frontend edited file src/indexjs).</div>
		);
	},
} );

The code highlights correctly up to the first but them makes everything afterwars (including the brackets) yellow like a quote. I already found a workaround for this which is to surround the with single quotes but I want to get a real fix for this issue, not a workaround.

0 Likes
#2

The problem is that the quotation marks are wrong. The code contains typographic curly quotes, not regular straight quotes.

Is this the exact code you’re working with?

0 Likes
#3

yes it is. Do you mean ESNext needs to use " instead of '?

0 Likes
#4

Either single ' or double " quotes are fine. You are not using either of those, but rather curly quotes ‘’. These are different characters. Curly quotes have no meaning in JavaScript, and your code is not valid and will not run. You need to replace the curly quotes with straight quotes.

0 Likes
#5

hmm I replaced all quotes with single quotes but nothing changed so idk if that was the issue

0 Likes
#6

I suspect that the forum may have converted some of the quotes to curly quotes on its own “like this” because the code that you posted isn’t inside of a code block.

To make it clearer what the code you’re using is, it may be helped to edit your original post to mark the code as a code block. Select all of the code and then press the </> button in the toolbar.

0 Likes
#7

oh yea that was weird, I could have sworn I posted my code in a code block the first time but I just fixed it and it looks different now… hmm. Any ideas what the issue is here?

0 Likes
#8

The problem is the JSX. The built-in syntax is for vanilla JavaScript and does not support JSX. For JSX highlighting, I suggest my own package, JS Custom, which offers configurable support for JSX and other JavaScript extensions.

0 Likes
#9

for sublime text?

0 Likes
#10

I’m not sure what you’re asking. JS Custom is a package for Sublime Text.

1 Like
#11

oh I meant how do I install it? I have not been using Sublime for very long

0 Likes
#13

ok I installed the package and then reopened the file and it is now highlighted correctly. Thanks

0 Likes