VSCode plugin: Syntax highlighting not correctly applied to embedded svelte component in markdown

Describe the bug Syntax highlighting not correctly applied to embedded svelte component in markdown when using “Svelte for VSCode”

To Reproduce Steps to reproduce the behavior:

Put the following inside a markdown document:

```svelte
<script>
  import { onMount } from "svelte";

  export let data = undefined;
  let dom_node;

  onMount(() => {
    Plotly.newPlot(dom_node, data, {barmode: 'stack'});
  });
</script>

<div id="plotDiv" bind:this={dom_node}></div>
```

For example a code snippet that is treated in a way you don’t expect.

Expected behavior

Expected similar syntax highlighting to what I see when viewing a svelte file with that content.

Actual behaviour

Get somewhat incorrect / inconsistent formatting (see screenshots)

Screenshots If applicable, add screenshots to help explain your problem.

View for a svelte component (correct):

View for a svelte component embedded in markdown (incorrect):

System (please complete the following information):

• OS: Mac and Windows 10
• IDE: VSCode
• Plugin/Package: “Svelte for VSCode”

Additional context Add any other context about the problem here.

[dummdidumm]

Thank you for digging into this!

[wlach]

Apologies for my flailing around. Dug into things more and realized that @jasonlyu123 was correct all along: the injection rules are not being applied in an embedded context. The weird behaviour I’m describing above is only due to the fact that the injection rules are not there, and it’s falling back to whatever else is defined in the file.

I’m now pretty sure this is an issue upstream so filed an issue there: https://github.com/microsoft/vscode-textmate/issues/152 – that has some more details as well as confirmation of the problem described.

It’s likely possible to make the grammar not depend on injections (e.g. I got it working for bare script tags without them), though I think it would be less elegant.