Markdown syntax highlighting in code blocks breaks in VS Code when template expressions are used

[jschuur]

I've noticed that in VS Code with regular Markdown syntax highlighting, using a template expression will break (actually toggle) syntax highlighting of any subsequent code blocks. In this example, const bar = 2; is not highlighted:

I know this is not exactly Observable Framework specific, but is this a known issue/solvable? It happens using the built-in Markdown renderer in the current VS Code.

Once you remove the template expression, syntax highlighting woks again:

[mootari]

It's known (see e.g. #263), but currently not fixable. The gist is that a line starting with $ is detected as the start of a LaTeX expression which has to be closed by a second $.

Here are a couple of workarounds:

• Start the line with a white space: ${foo}
• Mark the section as HTML by wrapping it in a tag: <div>${foo}</div>
• Add the closing delimiter in an HTML comment: ${foo}<!--$-->
• Add the closing delimiter in a JS comment: ${foo /*$*/}
• Use a $ prefixed variable name: ${$foo}
• Define a dummy variable const $ = ... somewhere, then use it in a comma expression: ${$, foo}

Properly supporting interpolations would require implementing either a custom TextMate grammar (likely on top of VS Code's builtin one) or a language server (much more versatile, but much more complex - see e.g. Svelte). I'm not aware of any other Markdown flavors that support interpolation.

[mootari]

Maybe even simpler: Start the line with a white space.

I've added it to the list.

[jschuur]

Maybe even simpler: Start the line with a white space.

I've added it to the list.

That's perfect, thanks!

Edit: Hmm, no, it's not, since eslint or whatever is auto-formatting removes the whitespace 😂.

Will use the $ comment route.

[mootari]

Unfortunately the above workarounds won't help with interpolations that span multiple lines. In those cases the workaround is a little more awkward: a /*$<script>*/ after the opening bracket.

<div class="card grid grid-cols-1">
  ${/*$<script>*/resize((width) =>
    Plot.plot({