Syntax highlighting of other languages inside tagged template strings and commented template strings

[karlhorky]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Problem

Using the following VS Code extensions allows for highlighting inside of tagged template strings (eg. css or html or sql tagged template strings) and template strings with a comment before them, see right side of VS Code editor

• lit-html VS Code Extension
• Styled Components VS Code Extension
• SQL tagged template literals (syntax only) VS Code Extension
• Comment tagged templates VS Code Extension

On the MDX side (left side):

1. The first CSS code inside of the code block is syntax highlighted
2. The subsequent CSS code in the tagged template strings are not syntax highlighted

Current solutions

I haven't seen a full solution to this with MDX, no.

I have seen that markdown-tm-language highlights other languages inside of Markdown code blocks (aka code fences), shown in the demo:

But this is not a tagged template string or comment template string, which can be important for features of template strings.

Proposed solutions

Identify template strings within MDX as template strings which the other extensions can add highlighting to.

Alternatives considered

1. Maybe this actually needs to be added to each of these other extensions? (to enable this syntax highlighting for MDX files?)
2. At first, I thought this may need to be a part of markdown-tm-language, but then, thinking through it more, it doesn't seem to fit, because this is only a TextMate grammar.

[remcohaszing]

We can’t support all possible embedded languages inside MDX files. It’s out of scope of this project. Neither can the builtin TypeScript syntax, that’s why you have those third party extensions.

We have documented how extensions can do this specifically for code blocks in packages/vscode-mdx. Some practical examples:

• https://github.com/bpruitt-goddard/vscode-mermaid-syntax-highlight/blob/master/syntaxes/mermaid.tmLanguage-mdx.yaml
• https://github.com/vuejs/language-tools/blob/master/extensions/vscode/syntaxes/mdx-vue.json
• https://github.com/withastro/language-tools/blob/main/packages/vscode/syntaxes/mdx.astro.tmLanguage.json

[karlhorky]

We have documented how extensions can do this specifically for code blocks

Yeah, if you mean the 3-backtick Markdown-style code blocks (aka code fences), that's not what I'm trying to get at with this issue (code blocks are mentioned under "Current Solutions")

It's about tagged template literals in JSX expressions:

css`
  em { color: red }
`

We can’t support all possible embedded languages inside MDX files. It’s out of scope of this project. Neither can the builtin TypeScript syntax, that’s why you have those third party extensions.

I'm not proposing that MDX Analyzer perform the syntax highlighting - I'm proposing that MDX Analyzer should expose / identify template strings in such a way so that third party extensions also work in MDX documents:

Proposed solutions

Identify template strings within MDX as template strings which the other extensions can add highlighting to.

But maybe I'm wrong that MDX Analyzer has anything to do here - maybe this is on the third party extensions, that they support highlighting in JSX expressions inside of MDX documents?

They would need to parse the MDX I guess...?

Alternatives considered

1. Maybe this actually needs to be added to each of these other extensions? (to enable this syntax highlighting for MDX files?)

[remcohaszing]

Syntax highlighting is done using TextMate grammers. The other extensions need to inject the right grammar into the right scope. There’s no difference between say injecting Mermaid or CSS syntax into markdown code blocks, JavaScript template literals, or block comments. There’s no parsing involved and no work to be done on MDX analyzer.

[karlhorky]

Ok got it, so if I'm understanding correctly, it would need to be a grammar update on these other extensions to add template string highlighting support within MDX.

[karlhorky]

Created a first issue over here, let's see if the other extensions are open to implementing:

• Support for template strings in JSX expressions in MDX? mjbvz/vscode-comment-tagged-templates#44