Svelte Section Highlighter

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 .svelte file — no commands needed.

Requirements

• VS Code 1.85.0 or 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:

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.