Inline Color Tags

Logluxe supports inline color markup that lets you embed color codes directly within strings. This is perfect for complex, multi-colored messages.

Basic Syntax

Use [color] to start a color and [/color] to end it:

log.tagged('Hello [red]world[/red]!');
// Output: "Hello" in default color, "world" in red, "!" in default

Output

Hello world!

🎮 Try it yourself

log.tagged('Hello [red]world[/red]!');

Available Tags

Color Tags

log.tagged('[black]Black text[/black]');
log.tagged('[red]Red text[/red]');
log.tagged('[green]Green text[/green]');
log.tagged('[yellow]Yellow text[/yellow]');
log.tagged('[blue]Blue text[/blue]');
log.tagged('[magenta]Magenta text[/magenta]');
log.tagged('[cyan]Cyan text[/cyan]');
log.tagged('[white]White text[/white]');
log.tagged('[gray]Gray text[/gray]');

Color Tags

Black text

Red text

Green text

Yellow text

Blue text

Magenta text

Cyan text

White text

Gray text

🎮 Try Color Tags

log.tagged('[red]Red text[/red]'); log.tagged('[green]Green text[/green]'); log.tagged('[yellow]Yellow text[/yellow]'); log.tagged('[blue]Blue text[/blue]'); log.tagged('[cyan]Cyan text[/cyan]');

Bright Color Tags

log.tagged('[brightRed]Bright red[/brightRed]');
log.tagged('[brightGreen]Bright green[/brightGreen]');
log.tagged('[brightYellow]Bright yellow[/brightYellow]');
log.tagged('[brightBlue]Bright blue[/brightBlue]');
log.tagged('[brightMagenta]Bright magenta[/brightMagenta]');
log.tagged('[brightCyan]Bright cyan[/brightCyan]');

Bright Colors

Bright red

Bright green

Bright yellow

Bright blue

Bright magenta

Bright cyan

Style Tags

log.tagged('[bold]Bold text[/bold]');
log.tagged('[dim]Dimmed text[/dim]');
log.tagged('[italic]Italic text[/italic]');
log.tagged('[underline]Underlined text[/underline]');

Style Tags

Bold text

Dimmed text

Italic text

Underlined text

Background Tags

log.tagged('[bgRed]Red background[/bgRed]');
log.tagged('[bgGreen]Green background[/bgGreen]');
log.tagged('[bgYellow]Yellow background[/bgYellow]');
log.tagged('[bgBlue]Blue background[/bgBlue]');

Background Colors

Red background

Green background

Yellow background

Blue background

Multiple Colors in One String

Mix multiple colors in a single message:

log.tagged('Status: [green]OK[/green] | Errors: [red]3[/red] | Warnings: [yellow]12[/yellow]');
log.tagged('[cyan]INFO[/cyan] User [bold]john@example.com[/bold] logged in');
log.tagged('Build: [green]✓[/green] Passed | [red]✗[/red] Failed | [yellow]⚠[/yellow] Skipped');

Output

Status: OK | Errors: 3 | Warnings: 12

INFO User john@example.com logged in

Build: ✓ Passed | ✗ Failed | ⚠ Skipped

🎮 Try it yourself

log.tagged('Status: [green]OK[/green] | Errors: [red]3[/red] | Warnings: [yellow]12[/yellow]'); log.tagged('[cyan]INFO[/cyan] User [bold]john@example.com[/bold] logged in'); log.tagged('Build: [green]✓[/green] Passed | [red]✗[/red] Failed | [yellow]⚠[/yellow] Skipped');

Nested Tags

Tags can be nested for combined effects:

log.tagged('[bold][red]Bold and red[/red][/bold]');
log.tagged('[bgYellow][black]Black on yellow[/black][/bgYellow]');
log.tagged('[bold][underline][cyan]Bold, underlined, cyan[/cyan][/underline][/bold]');

Output

Bold and red

Black on yellow

Bold, underlined, cyan

🎮 Try Nested Tags

log.tagged('[bold][red]Bold and red[/red][/bold]'); log.tagged('[green][bold]Success message[/bold][/green]');

Practical Examples

Status Messages

function logStatus(service, status) {
  const statusColors = {
    up: '[green]●[/green] UP',
    down: '[red]●[/red] DOWN',
    degraded: '[yellow]●[/yellow] DEGRADED'
  };
  
  log.tagged(`[bold]${service}[/bold]: ${statusColors[status]}`);
}

logStatus('Database', 'up');
logStatus('Cache', 'degraded');
logStatus('API Gateway', 'down');

Service Status

Database: ● UP

Cache: ● DEGRADED

API Gateway: ● DOWN

🎮 Try Status Messages

log.tagged('[bold]Database[/bold]: [green]●[/green] UP'); log.tagged('[bold]Cache[/bold]: [yellow]●[/yellow] DEGRADED'); log.tagged('[bold]API Gateway[/bold]: [red]●[/red] DOWN');

Log Entries with Timestamps

function logEntry(level, message) {
  const timestamp = new Date().toISOString();
  
  const levelColors = {
    DEBUG: '[gray]DEBUG[/gray]',
    INFO: '[cyan]INFO[/cyan]',
    WARN: '[yellow]WARN[/yellow]',
    ERROR: '[red]ERROR[/red]'
  };
  
  log.tagged(`[dim]${timestamp}[/dim] ${levelColors[level]} ${message}`);
}

logEntry('INFO', 'Application started');
logEntry('DEBUG', 'Loading configuration');
logEntry('WARN', 'Using default settings');
logEntry('ERROR', 'Connection timeout');

Log Entries

2024-01-15T10:30:00.000Z INFO Application started

2024-01-15T10:30:00.100Z DEBUG Loading configuration

2024-01-15T10:30:00.200Z WARN Using default settings

2024-01-15T10:30:00.300Z ERROR Connection timeout

🎮 Try Log Entries

log.tagged('[dim]2024-01-15T10:30:00Z[/dim] [cyan]INFO[/cyan] Application started'); log.tagged('[dim]2024-01-15T10:30:01Z[/dim] [gray]DEBUG[/gray] Loading configuration'); log.tagged('[dim]2024-01-15T10:30:02Z[/dim] [yellow]WARN[/yellow] Using default settings'); log.tagged('[dim]2024-01-15T10:30:03Z[/dim] [red]ERROR[/red] Connection timeout');

Diff Output

function showDiff(filename, additions, deletions) {
  log.tagged(`[bold]${filename}[/bold] [green]+${additions}[/green] [red]-${deletions}[/red]`);
}

showDiff('src/index.ts', 45, 12);
showDiff('package.json', 3, 1);
showDiff('README.md', 100, 20);

Git Diff

src/index.ts +45 -12

package.json +3 -1

README.md +100 -20

🎮 Try Diff Output

log.tagged('[bold]src/index.ts[/bold] [green]+45[/green] [red]-12[/red]'); log.tagged('[bold]package.json[/bold] [green]+3[/green] [red]-1[/red]'); log.tagged('[bold]README.md[/bold] [green]+100[/green] [red]-20[/red]');

HTTP Request Logging

function logRequest(method, path, status, ms) {
  const methodColors = {
    GET: 'green',
    POST: 'yellow',
    PUT: 'blue',
    DELETE: 'red'
  };
  
  const color = methodColors[method];
  const statusColor = status < 400 ? 'green' : status < 500 ? 'yellow' : 'red';
  
  log.tagged(
    `[${color}]${method.padEnd(7)}[/${color}]` +
    `[dim]${path}[/dim] ` +
    `[${statusColor}]${status}[/${statusColor}] ` +
    `[gray]${ms}ms[/gray]`
  );
}

HTTP Requests

GET /api/users 200 45ms

POST /api/users 201 120ms

DELETE /api/users/5 404 30ms

GET /api/health 500 5ms

🎮 Try HTTP Logging

log.tagged('[green]GET [/green] [dim]/api/users[/dim] [green]200[/green] [gray]45ms[/gray]'); log.tagged('[yellow]POST [/yellow] [dim]/api/users[/dim] [green]201[/green] [gray]120ms[/gray]'); log.tagged('[red]DELETE [/red] [dim]/api/users/5[/dim] [yellow]404[/yellow] [gray]30ms[/gray]'); log.tagged('[green]GET [/green] [dim]/api/health[/dim] [red]500[/red] [gray]5ms[/gray]');

Test Results

function testResult(name, passed, duration) {
  const icon = passed ? '[green]✓[/green]' : '[red]✗[/red]';
  const nameColor = passed ? '' : '[red]';
  const nameEnd = passed ? '' : '[/red]';
  
  log.tagged(`${icon} ${nameColor}${name}${nameEnd} [gray](${duration}ms)[/gray]`);
}

testResult('should create user', true, 42);
testResult('should validate email', true, 15);
testResult('should handle errors', false, 8);
testResult('should return 404', true, 23);

Test Results

✓ should create user (42ms)

✓ should validate email (15ms)

✗ should handle errors (8ms)

✓ should return 404 (23ms)

🎮 Try Test Results

log.tagged('[green]✓[/green] should create user [gray](42ms)[/gray]'); log.tagged('[green]✓[/green] should validate email [gray](15ms)[/gray]'); log.tagged('[red]✗[/red] [red]should handle errors[/red] [gray](8ms)[/gray]'); log.tagged('[green]✓[/green] should return 404 [gray](23ms)[/gray]');

Progress Indicator

function showProgress(current, total, label) {
  const percent = Math.round((current / total) * 100);
  const filled = Math.round(percent / 5);
  const empty = 20 - filled;
  
  const bar = '[green]' + '█'.repeat(filled) + '[/green]' + 
              '[gray]' + '░'.repeat(empty) + '[/gray]';
  
  log.tagged(`${bar} [bold]${percent}%[/bold] ${label}`);
}

showProgress(15, 100, 'Downloading...');
showProgress(50, 100, 'Installing...');
showProgress(100, 100, 'Complete!');

Progress

███░░░░░░░░░░░░░░░░░ 15% Downloading...

██████████░░░░░░░░░░ 50% Installing...

████████████████████ 100% Complete!

🎮 Try Progress Bar

log.tagged('[green]███[/green][gray]░░░░░░░░░░░░░░░░░[/gray] [bold]15%[/bold] Downloading...'); log.tagged('[green]██████████[/green][gray]░░░░░░░░░░[/gray] [bold]50%[/bold] Installing...'); log.tagged('[green]████████████████████[/green] [bold]100%[/bold] Complete!');

---

Next: Style Builder →