Custom Styling for SVELTE tags in Html possible?

Answered
Avatar
Corrl
Created

In a .svelte file the Html part can contain elements like

{#if expression}
   ...
{:else if expression}
   ...
{/if}
{#each items as item}
    ...
{/each}
  • {#await expression}...{:then name}...{:catch name}...{/await}
  • {{#key expression}...{/key}
  • {@html ...}
  • {@debug ...}
  • {@const ...}

Is there a way to modify the Color Scheme to have these tags displayed in a different color?

 

Votes

0

Share

3 comments
Avatar
Konstantin Annikov
Created

See https://youtrack.jetbrains.com/issue/WEB-52334#focus=Comments-27-5596272.0-0

Implemented: started from 2021.3.1 you can specify "Custom Tag Name" in "Preferences | Editor | Color Scheme | HTML/XML" for changing the color of Vue / JSX(React) / Angular components. The new logic should work for all HTML-based frameworks (e.g. Svelte, Riot) but I tested it only with these three frameworks.

0
Avatar
Corrl
Created

Thanks for the link! The setting for the "Custom Tag Name" affects the Svelte components elements, which is great. Still hoping for a way to set the color of the special elements in curly braces `{#if}...{/if}, {@html ...}` seperately somehow... is this possible? 

0
Avatar
Oksana Chumak
Created

The color used for those elements can be configured in `Settings (Preferences) | Editor | Color Scheme | JavaScript > Keyword`. 

If you would like to have a separate setting for that please feel free to submit a feature request in https://youtrack.jetbrains.com/issues/web.

1

Please sign in to leave a comment.