VSCode 1.92 YAML grammar breaks MDX syntax highlighting

[remcohaszing]

Does this issue occur when all extensions are disabled?: No, VSCode 1.92 YAML grammar updates cause a regression when embedded in the MDX syntax highlighting.

• VS Code Version: 1.92
• OS Version: Pop!_OS 22.04

Steps to Reproduce:

1. Launch VSCode with code --disable-extensions
2. Install the unifiedjs.vscode-mdx extension
3. Create a file named whatever.mdx with the following content:

   ---
   foo: 1
   ---
   
   This is highlighted as a YAML string
   
   # This is highlighted as a YAML comment
   
   This is highlighted as a YAML error

Notice how the syntax highlighting is broken. This was not the case in VSCode < 1.92.

Removing all lines from the frontmatter fixes it:

---
---

This is highlighted as a YAML string

# This is highlighted as a YAML comment

This is highlighted as a YAML error

Proper MDX syntax highlighting

A workaround is to install the redhat.vscode-yaml extension. This uses a different YAML grammar.

Related issues:

• Adding newline in between frontmatter delimiters causes issues wooorm/markdown-tm-language#10
• Syntax Highlighting Breaks with Frontmatter mdx-js/mdx-analyzer#462
• Highlighting regression in VSCode 1.92.0 mdx-js/mdx-analyzer#464
• https://github.com/orgs/mdx-js/discussions/2520
• https://github.com/orgs/mdx-js/discussions/2521

[mjbvz]

Seems like this came in with the new yaml grammar #219833

I believe that grammars that use source.yaml need to switch to use a begin/while pattern for the front matter like in this change: microsoft/vscode-markdown-tm-grammar#162

@RedCMD Is there anything that can be done on the yaml grammar side to handle this more elegantly?

[RedCMD]

@mjbvz I'll see what I can do

its caused by this line being too greedy
https://github.com/RedCMD/YAML-Syntax-Highlighter/blob/8de6455b5306c4963eeaef692ee3375d80a23f0e/syntaxes/yaml-1.2.tmLanguage.json#L15
however I can't just restrict it, otherwise the cross-document VERSION feature won't work

there definitely is quite a few extensions using the old FrontMatter code https://github.com/search?q=lang%3Ajson+A-%7B3%7D&type=code 200+

[RedCMD]

I think I've got something working
found a few VSCode TextMate bugs at the same time

you can test out the latest changes by installing my pre-release YAML extension

[alexr00]

For the recovery release, I'm going to roll back to the old grammar. In insiders, I'll fix forward and grab your fix @RedCMD.

[archiewood]

is there a way to roll back to the previous grammar while we await a release?

I can tell our users to install the redhat extension, but a fix that required no action of them would be better

[alexr00]

The release went out yesterday.

[archiewood]

Thank you, I upgraded and this seems fixed in 1.92.1

[aeschli]

Verified in
1.93.1
Commit: 38c31bc
Date: 2024-09-11T17:20:05.685Z
Electron: 30.4.0
ElectronBuildId: 10073054
Chromium: 124.0.6367.243
Node.js: 20.15.1
V8: 12.4.254.20-electron.0
OS: Linux x64 5.15.0-119-generic

[Mti-isf]

[](แชร์ & ชวนเพื่อนจองทริป รับเลย Trip Coins 200 บาท! ยิ่งแชร์ยิ่งคุ้ม บอกต่อแอปดีๆ ให้เพื่อนของคุณเลย
https://th.trip.com/sale/4283/referee.html?locale=th-TH&referCode=603DE9E1C7E008C5F2B70DEE7ECF89A1)

[FragsterAt]

In 1.94.1 vs code corrupts code highlighting after YAML block again (
vuejs/language-tools#4831

screenshot of vscode 1.93.0

[alexr00]

Thanks for reporting @FragsterAt. I'm reverting the YAML grammar in the main branch, so the next VS Code insiders will not have this issue. We've missed the chance to get the fix into 1.94.2, but if we have a 1.94.3, then I'll make the change there too.

[alexr00]

Actually, @FragsterAt I'm not seeing the same issue:

[alexr00]

Ah, I had an extension installed that was providing a different yaml grammar. I still see the bug.

[FragsterAt]

Actually, @FragsterAt I'm not seeing the same issue:

Please look in vuejs/language-tools#4831

In 1.93.1 All was ok, but in 1.94.1 it broken again.

.vue files can have "sections" in different languages, yaml section breaks highlighting (now a little different in comparison to 1.93.0, but still corrupted) in next sections

with yaml block in 1.94.1 (different from 1.93.0)

without yaml block in 1.94.1

https://gist.github.com/FragsterAt/213f76e1e6a4592ac071236849af6392

[bpasero]

Moving to the normal October milestone.

[alexr00]

Grammar revert is already done in main.