MDX Extension for VSCode: Fixing coloring issue using $

[rajbpatel96]

I have installed the MDX Extension for VSCode (v.1.0.3) and I am having an issue with the color coating of the code in the editor. The picture is attached. I believe the issue to be the fault of the two "$" signs in the name and lists parts. Does anybody know how to solve this?

[ChristianMurphy]

My understand is that when the highlighter, sees a different content type embedded in the MDX/markdown.
It transitions to that language, here to the YAML language https://github.com/mdx-js/vscode-mdx/blob/a5d7c030e1120b6a8e827d028818352c7d9dc46e/package.json#L101

Two likely things which could be happening:

1. the $ causes the grammar to think there is math, and switch to the math grammar
2. there is a bug in the YAML grammar, which prevents it from handling $

@rajbpatel96 could you open an issue at https://github.com/mdx-js/vscode-mdx/issues?
And if you have interest maybe look into the issue, add some findings to the issue, and maybe open a PR with a fix?

[rajbpatel96]

I have submitted the issue: mdx-js/mdx-analyzer#233
Unfortunately, I would not know where to even start to look into the way the MDX extension works to fix it, as I am entirely new to this

[ChristianMurphy]

A good starting place would be getting an understanding of how VSCode Syntax Highlighting works.
https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide and https://macromates.com/manual/en/language_grammars
The MDX VScode extension uses TextMate grammars to highlight syntax in the document.