language-tools: 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.
About this issue
- Original URL
- State: open
- Created 3 years ago
- Comments: 16 (14 by maintainers)
Commits related to this issue
- Add support for Svelte chunks Currently the syntax highlighting isn't quite right, probably related to a bug in the underlying Svelte highlighter for vscode: https://github.com/sveltejs/language-too... — committed to wlach/myst-vs-code by wlach 3 years ago
- (fix) Handle syntax highlighting for most markdown files Mostly fixes #1094. Do this by injecting rules to parse typescript and css for svelte script/style blocks inside markdown only. This should co... — committed to wlach/language-tools by wlach 2 years ago
- (fix) Handle syntax highlighting for most markdown files (#1537) Mostly fixes_ #1094. Do this by injecting rules to parse typescript and css for svelte script/style blocks inside markdown only. This... — committed to sveltejs/language-tools by wlach 2 years ago
Thank you for digging into this!
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.