Skip to main content Svelte Highlight v7.21.1

AnsiOutput preview

AnsiOutput

AnsiOutput renders terminal output with ANSI SGR escape codes as styled HTML. The parser is separate from highlight.js. Build logs, CLI output, and test runners are the usual cases.

Standard foreground colors

SGR codes 30–37.

black  red  green  yellow  blue  magenta  cyan  white

Bright foreground colors

SGR codes 90–97.

black  red  green  yellow  blue  magenta  cyan  white

Background colors

SGR codes 40–47 with white text. Auto-contrast flips to black where white would vanish (the white swatch).

 black   red   green   yellow   blue   magenta   cyan   white 

Text attributes

Bold, dim, italic, underline, alone or combined.

bold   dim   italic   underline   bold underline red   dim italic cyan

256-color cube

Indices 16–231 (38;5;n / 48;5;n).

                                                                        
                                                                        
                                                                        
                                                                        
                                                                        
                                                                        

256-color grayscale ramp

Indices 232–255.

                                                

24-bit truecolor

A rainbow built from 38;2;r;g;b sequences.

Build log

Typical bundler output.

$ npm run build

vite v7.3.3 building for production...
 42 modules transformed.
dist/index.html              0.46 kB │ gzip:  0.30 kB
dist/assets/index-a1b2c3.js  143.21 kB │ gzip: 46.12 kB
✓ built in 2.58s

Test runner

Pass / fail summary with colored badges.

RUN  v2.1.0 /svelte-highlight

  PASS  tests/ansi.test.ts (17 tests)
  FAIL  tests/parser.test.ts (1 failed)
   × malformed input is dropped, not thrown

 Test Files  1 passed 1 failed (2)
      Tests  16 passed 1 failed (17)

Git diff

Added / removed lines.

diff --git a/src/ansi.js b/src/ansi.js
@@ -1,4 +1,9 @@
 export function parseAnsi(text) {
+  if (!text) return [];
+  const segments = [];
-  // TODO: implement
   return segments;
 }

Malformed input

Unsupported (999) and unterminated escape sequences are dropped, not thrown.

safe unknown code ignored then unterminated

Auto-contrast

autoContrast (default on) flips a span's foreground to black or white when it wouldn't read on its background. Set autoContrast=false to keep the ANSI colors as-is.

autoContrast (default)

 black   red   green   yellow   blue   magenta   cyan   white 

autoContrast={false}

 black   red   green   yellow   blue   magenta   cyan   white 

Paired with CodeWindow

Wrap with CodeWindow variant="terminal" for the prompt and title bar.

vitest
RUN  v2.1.0 /svelte-highlight

  PASS  tests/ansi.test.ts (17 tests)
  FAIL  tests/parser.test.ts (1 failed)
   × malformed input is dropped, not thrown

 Test Files  1 passed 1 failed (2)
      Tests  16 passed 1 failed (17)

Themed palette

The 16 base colors, background, foreground, and bold/dim styling are CSS variables. Same build log, recolored toward Solarized.

$ npm run build

vite v7.3.3 building for production...
 42 modules transformed.
dist/index.html              0.46 kB │ gzip:  0.30 kB
dist/assets/index-a1b2c3.js  143.21 kB │ gzip: 46.12 kB
✓ built in 2.58s

Parser API

parseAnsi(text) returns the segments behind the component.

error: deprecated
parseAnsi("␛[1;31merror␛[0m: ␛[33mdeprecated␛[0m")
// [{"text":"error","bold":true,"fg":{"name":"red"}},{"text":": "},{"text":"deprecated","fg":{"name":"yellow"}}]