Preview Updated 2026-05-10

AnsiText

Parses ANSI escape sequences (\x1b[...m) and renders them as colored spans — display-only, no xterm.js dependency.

Basic usage

Supports the basic 16 colors (foreground + background) plus the 8 bright colors and modifiers (bold / dim / italic / underline / inverse). Colors map to design tokens and follow the active theme; 24-bit truecolor escapes are not parsed.

背景

✓ build succeeded in 1.2s
⚠  warning: 3 unused exports
✗ test failed

  expected:  foo 
  received:  bar

src/App.vue

<script setup lang="ts">
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m build succeeded in \x1b[36m1.2s\x1b[0m\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[31m✗\x1b[0m \x1b[1mtest failed\x1b[0m\n\n  expected: \x1b[42m\x1b[30m foo \x1b[0m\n  received: \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>
<template>
  <CfAnsiText :text="sample" />
</template>

<script setup>
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m build succeeded in \x1b[36m1.2s\x1b[0m\n\x1b[33m⚠\x1b[0m  warning: 3 unused exports\n\x1b[31m✗\x1b[0m \x1b[1mtest failed\x1b[0m\n\n  expected: \x1b[42m\x1b[30m foo \x1b[0m\n  received: \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>
<template>
  <CfAnsiText :text="sample" />
</template>

import { CfAnsiText } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAnsiText text={terminalOutput} />
    </>
  );
}

Three sizes

sm / md / lg adjusts font size and line height — sm for compact toast logs, lg for terminal panels.

背景

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

✓ test passed
  duration: 12ms
  expected:  foo 
  actual  :  bar

src/App.vue

<script setup lang="ts">
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m \x1b[1mtest passed\x1b[0m\n\x1b[2m  duration:\x1b[0m \x1b[36m12ms\x1b[0m\n\x1b[31m  expected\x1b[0m: \x1b[42m\x1b[30m foo \x1b[0m\n\x1b[31m  actual\x1b[0m  : \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfAnsiText :text="sample" size="sm" />
    <CfAnsiText :text="sample" size="md" />
    <CfAnsiText :text="sample" size="lg" />
  </div>
</template>

<script setup>
import { CfAnsiText } from '@chufix-design/vue';
const sample = '\x1b[1;32m✓\x1b[0m \x1b[1mtest passed\x1b[0m\n\x1b[2m  duration:\x1b[0m \x1b[36m12ms\x1b[0m\n\x1b[31m  expected\x1b[0m: \x1b[42m\x1b[30m foo \x1b[0m\n\x1b[31m  actual\x1b[0m  : \x1b[41m\x1b[37m bar \x1b[0m\n';
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfAnsiText :text="sample" size="sm" />
    <CfAnsiText :text="sample" size="md" />
    <CfAnsiText :text="sample" size="lg" />
  </div>
</template>

import { CfAnsiText } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfAnsiText text={log} size="sm" />
      <CfAnsiText text={log} size="lg" />
    </>
  );
}

API

Prop	Type	Default	Description
`text`	`string`	—	String containing ANSI escapes
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`wrap`	`boolean`	`true`	Soft line wrapping
`preserveWhitespace`	`boolean`	`true`	`<pre>` behavior

Supported SGR codes: 0 1 2 3 4 7 22 23 24 27 30-37 39 40-47 49 90-97 100-107.