Inline JSX elements (CamelCase) do not seem syntax highlighted

[balupton]

They are treated just like markdown. Lowercasing the jsx element works for syntax highlighting, but then it doesn't function.

[silvenon]

Could you share a code snippet and/or screenshot? I don't understand what isn't syntax highlighted.

[silvenon]

Ah, I think you're referring to inline JSX, correct?

[balupton]

Correct. Sorry, posted the issue on my phone. An example is a JSX element (so CamelCase) within a nested markdown list

[balupton]

[silvenon]

Yeah, in MDX that's what's classified as inline JSX, where a single line needs to be partially interpreted as Markdown and partially as JSX.

I'll see what I can do, thanks for reporting. 🙂

[blummis]

Hi, any ideas how to fix this?

This is how it shows for me:

[silvenon]

In the near future no, I'm sorry, I'm very inexperienced with grammars in general. I think I need to rebuild this extension entirely to gain more more power over these cases because it's currently only looking for empty lines, as far as I can remember, but MDX is more complex now, with inline JSX, interpolations etc.

[karlhorky]

Because HTML tags are also valid when written uppercase, and web components would be classified as "Unknown", maybe this can be fixed in the base text.html.markdown grammar, which also has this issue:

Compare that with the HTML grammar highlighting:

I am also not experienced with grammars, but from a cursory look it seems like you're using here:

vscode-mdx/syntaxes/mdx.tmLanguage.json

Lines 41 to 46 in fefe056

	"markdown": {
	"contentName": "text.html.markdown",
	"patterns": [
	{ "include": "text.html.markdown" }
	]
	}

I will open an issue on the grammar to request feedback on this change.

[karlhorky]

Opened microsoft/vscode#79119 for this.

Edit: Copied to microsoft/vscode-markdown-tm-grammar#49, in case that is the correct place for it.

[karlhorky]

Caveat: JSX highlighting would be of course better if someone can crack it (cc @mjbvz, could you possibly point us in the right direction for updating the grammar?) - because it would show a different color for capitalized tags, but this would at least be an improvement on the current situation.

[karlhorky]

Well case insensitivity was added in microsoft/vscode-markdown-tm-grammar@67b9b34 - should be out in the next VS Code Insiders build.

But unknown / custom elements were not addressed. I've asked about that in microsoft/vscode-markdown-tm-grammar#49 (comment)