Visually distinguish the three sections of a .svelte file — <script>, <style>, and markup — by giving each a distinct background color directly in your editor.
Features
- Highlights
<script>blocks with a configurable background (default: warm amber tint). - Highlights
<style>blocks with a configurable background (default: cool blue tint). - Highlights the HTML markup area with a configurable background (default: subtle dark tint).
- Colors are reflected in the overview ruler (the minimap scrollbar gutter) for quick orientation.
- Works automatically on any open
.sveltefile — no commands needed.
Requirements
- VS Code
1.85.0or newer. - A Svelte project (no additional Svelte tooling is required by this extension).
Extension Settings
All colors can be changed via Settings → Extensions → Svelte Section Highlighter, or directly in settings.json:
| Setting | Default | Description |
|---|---|---|
svelteSectionHighlighter.scriptBackground |
#ffff0010 |
Background for <script> sections |
svelteSectionHighlighter.styleBackground |
#0000ff10 |
Background for <style> sections |
svelteSectionHighlighter.markupBackground |
#ff000010 |
Background for markup sections |
Colors support hex (#RRGGBB, #RRGGBBAA, #RGB), rgb(), rgba(), and hsl() formats. The VS Code color picker is available directly in settings for hex values.
Example (settings.json):
"svelteSectionHighlighter.scriptBackground": "#ffff0010",
"svelteSectionHighlighter.markupBackground": "#ff000010"
"svelteSectionHighlighter.styleBackground": "#0000ff10",
License
CC BY-NC-ND 4.0 — free to use for non-commercial purposes; no modifications or redistribution.