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)

[karlhorky]

Unknown / custom elements merged in! microsoft/vscode-markdown-tm-grammar#54

Still is not a complete fix, because other JSX syntax like non-string props passing (<Grid style={{ background: "green" }}>) is still not highlighted, but it's a start for simple components!

[silvenon]

Great! I'll see what I can do about that. 👍 Thanks for keeping this issue updated!

[karlhorky]

No problem :) yeah I think the "correct" way to fix it would be for inline tags (probably all inline tags) to start triggering the JSX grammar again. Not entirely sure how to do this off the top of my head, but I guess the vscode-markdown-tm-grammar code could be illuminating in this regard... They switch to the other html grammar a lot within it.

[karlhorky]

Seems like looking at the Markdown grammar will be helpful in other ways too. For example, currently in the MDX grammar, the Markdown inside the HTML element is not highlighted (Markdown can be embedded within HTML if it starts at the start of the line):

Compare that to the Markdown grammar:

[karlhorky]

The fix I refer to in #9 (comment) above was released in VS Code 1.38 btw:

https://code.visualstudio.com/updates/v1_38#_notable-fixes

79478: Highlight custom html tags in markdown files

[felixakiragreen]

This was fixed in the VSCode Markdown lib but still broken in this one.