How to get correct highlights in .svelte files

[gipo355]

Hello! thanks for this plugin!

I was wondering if it was possible to get html inside svelte files to highlight tags differently.

this is the current implementation, all the tags have equal colors

[HiPhish]

It is probably possible, but I don't know Svelte. How do you write files for Svelte? Are they a special file type like Vue? If you could post a sample Svelte file I could look into it.

[gipo355]

Of course! thanks for the quick response,

you can find some source files on github @ https://github.com/sveltejs/kit/tree/main/packages/create-svelte/templates/default

(e.g. https://github.com/sveltejs/kit/blob/main/packages/create-svelte/templates/default/src/routes/sverdle/%2Bpage.svelte)

which is what gets installed when running npm create svelte@latest my-app (https://kit.svelte.dev/docs/creating-a-project)

.svelte files include javascript/typescript, HTML, scss/css/postcss in it.

There is its own treesitter which highlights different things but I can't get rainbows in it.

[gipo355]

Adding another example page in case something smaller is needed: https://gist.github.com/gipo355/8459cd522df8fa1be82bd23644f06c78

[HiPhish]

Is this a reasonable Svelte test file?

<script lang="ts">
	import { baz } from 'foo/bar';

	baz({a: {b: {c: 'd'}}});
</script>

<style>
	p {
		font-size: 2em;
	}
</style>

<svelte:head>
	<title>Test page</title>
	<meta name="description" content="A test page" />
</svelte:head>

<h1>A test page for Svelte</h1>

<form action="?/herp/derp" method="post">
	<p>This is a paragraph</p>
	<hr/>
	<ul>
		{#each ["foo", "bar", "baz"] as x}
		<li class="some-class">{ x }</li>
		{/each}
	</ul>
	{# if True}
	<p>Some text </p>
	{/if}
</form>

The parser is giving me several problems:

• The CSS inside the style is not nested correctly
• The array inside the each has errors
• Nested if, elseif is a real mess because each elseif raises the nesting level by one

I don't think this is really production ready and I would rather have someone who knows Svelte help out. Here is the query I got so far: rainbow-delimiters.txt

[gipo355]

yes, i formatted it and added some nestings

<script lang="ts">
  import { baz } from 'foo/bar';

  baz({
    a: {
      b: { c: 'd' },
    },
  });

  const x = {
    a: {
      b: {
        c: 'd',
      },
    },
  };
</script>

<svelte:head>
  <title>Test page</title>
  <meta name="description" content="A test page" />
</svelte:head>

<h1>A test page for Svelte</h1>

<div class="1">
  <div class="2">
    <div class="3">
      <div class="4">
        <p class="5"></p>
      </div>
    </div>
  </div>
</div>

<form action="?/herp/derp" method="post">
  <p>This is a paragraph</p>
  <hr />
  <ul>
    {#each ['foo', 'bar', 'baz'] as x}
      <li class="some-class">{x}</li>
    {/each}
  </ul>
  {#if true}
    <p>Some text</p>
  {/if}
</form>

<style lang="scss">
  p {
    font-size: 2em;

    &.some-class {
      color: red;
    }

    h2 {
      color: blue;
    }
  }
</style>

[gipo355]

:TSInstall svelte installs tree sitter,

lsps active are