Code colors in script tags are not visible

[Legion64]

Hello, I am developing a website using Vue 3 with Volar. But there is a problem. Whenever I start to write code in "template", the colors in the script disappear.

But I don't have such a problem when I don't write any html code in the "template" or when it has empty content in general.

What is the reason of this? Why am I facing such a situation?

[Legion64]

I want to make an addition. I found the cause of the problem. But I couldn't figure out exactly why. Coloring disappears if there is SVG code in "template".

Example;

<template>
  <svg viewBox="0 0 24 24" class="h-6 w-6 fill-zinc-500 transition group-hover:fill-zinc-600 dark:fill-zinc-400 dark:group-hover:fill-zinc-300">
    <path d="M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715zM7.003 8.575a1.546 1.546 0 01-1.548-1.549 1.548 1.548 0 111.547 1.549zm1.336 9.764H5.666V9.75H8.34v8.589zM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.003z"></path>
  </svg>
</template>

If the code is like this, the script coloring is lost.

[johnsoncodehk]

Can't confirm due to missing repro case, but it seems a same problem to #192.

[Legion64]

Can't confirm due to missing repro case, but it seems a same problem to #192.

Yes, that's exactly the problem. There is a problem closing the "svg" tag in the case mentioned for #192. All script coloring is lost because the ">" is shifted to a bottom line.

If the code is arranged like this;

Coloring in the script also works properly. Otherwise, as I mentioned above, the coloring is lost.

Additional Question;
I have one more small question. I used to be able to use snippets with Vetur. But I can't do that with Volar. For example, when I type <vue>, it makes the whole file ready. How can I achieve this with Volar?

[johnsoncodehk]

👇
https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/vetur

[Legion64]

Thank you for the answer to the additional question. I tested the original issue on "VSCode Insider - 1.73.1" and confirmed that I was getting svg related errors as a result and therefore the scripts content could not be displayed correctly. After this stage, do I need to start an Issue on VSCode?

[johnsoncodehk]

This is not VSCode's issue, it's textmate/html.tmbundle#101, but no update. :p

[Legion64]

So, do you have any workarounds for this situation? Or do we have to use it like this? :)

[johnsoncodehk]

I think you're using Prettier, you can check if Prettier has a rule option for this case.

Or you can change your formatter, I personally prefer Volar + https://github.com/johnsoncodehk/volar-plugins/tree/master/packages/prettyhtml.

[Legion64]

Thank you for your interest. I changed the formatter as you said and the problem was solved. I appreciate the effort you put into Volar. I wish you good work.