ArcaneCodeBlock#

A code block component with built-in style presets for displaying code, terminal output, and preformatted text.

Note: This component was previously named ArcanePre. The old name still works as a legacy alias.

Quick Start#

Use factory constructors for common patterns:

// Code block with background, padding, border
ArcaneCodeBlock.code(
  children: [ArcaneText('const x = 42;')],
)

// Terminal style with dark background
ArcaneCodeBlock.terminal(
  children: [ArcaneText('\$ npm install')],
)

Style Presets#

ArcaneCodeBlock includes the CodeBlockStyle enum for quick styling:

// Using the style parameter
ArcaneCodeBlock(
  style: CodeBlockStyle.code,
  children: [ArcaneText('const greeting = "Hello";')],
)

ArcaneCodeBlock(
  style: CodeBlockStyle.terminal,
  children: [ArcaneText('\$ dart run')],
)

ArcaneCodeBlock(
  style: CodeBlockStyle.minimal,
  children: [ArcaneText('simple code')],
)

Factory Constructors#

ArcaneCodeBlock.code#

Pre-styled for code blocks:

ArcaneCodeBlock.code(
  children: [
    ArcaneText('''
function greet(name) {
  return `Hello, \${name}!`;
}
'''),
  ],
)

Includes:

• Code background (Background.code)
• Medium padding
• Border radius
• Monospace font
• Word wrapping

ArcaneCodeBlock.terminal#

Pre-styled for terminal/CLI output:

ArcaneCodeBlock.terminal(
  children: [
    ArcaneText('''
\$ dart pub get
Resolving dependencies...
+ arcane_jaspr 2.0.0
Changed 1 dependency!
'''),
  ],
)

Includes:

• Black background
• Neon green text
• Medium padding
• Border radius
• Monospace font

Properties#

Custom Styling#

Presets can be extended with the styles parameter:

ArcaneCodeBlock.code(
  styles: const ArcaneStyleData(
    maxHeightCustom: '200px',
    overflow: Overflow.auto,
  ),
  children: [ArcaneText(longCodeContent)],
)

Or use CodeBlockStyle.raw with full custom styling:

ArcaneCodeBlock(
  style: CodeBlockStyle.raw,
  styles: const ArcaneStyleData(
    background: Background.surfaceVariant,
    padding: PaddingPreset.lg,
    fontFamily: FontFamily.mono,
    fontSize: FontSize.sm,
    borderRadius: Radius.lg,
    border: BorderPreset.accent,
  ),
  children: [ArcaneText('Custom styled code')],
)

Aliases#

import 'package:arcane_jaspr/aliases.dart';

// New sensible name
ACodeBlock.code(
  children: [ArcaneText('const x = 42;')],
)

ACodeBlock(
  style: ACodeBlockStyle.terminal,
  children: [ArcaneText('\$ ls -la')],
)

// Legacy alias (still works!)
APre.code(
  children: [ArcaneText('const x = 42;')],
)

Examples#

JSON Data#

ArcaneCodeBlock.code(
  children: [
    ArcaneText('''
{
  "name": "arcane_jaspr",
  "version": "2.0.0",
  "description": "UI components for Jaspr"
}
'''),
  ],
)

Build Log with Scroll#

ArcaneCodeBlock.code(
  styles: const ArcaneStyleData(
    maxHeightCustom: '300px',
    overflow: Overflow.auto,
  ),
  children: [ArcaneText(buildLogOutput)],
)

Error Stack Trace#

ArcaneCodeBlock(
  style: CodeBlockStyle.code,
  styles: const ArcaneStyleData(
    background: Background.destructive,
    textColor: TextColor.onDestructive,
  ),
  children: [
    ArcaneText('''
Error: Could not find file
    at FileReader.read (file_reader.dart:42)
    at DataLoader.load (data_loader.dart:18)
    at main (main.dart:5)
'''),
  ],
)

Why CodeBlockStyle?#

Instead of writing raw CSS:

// Old way - lots of raw CSS
ArcaneCodeBlock(
  styles: const ArcaneStyleData(
    raw: {
      'background': 'var(--arcane-code-background)',
      'padding': '16px',
      'border-radius': '8px',
      'font-family': 'monospace',
      'white-space': 'pre-wrap',
    },
  ),
  children: [...],
)

Use enum-based presets:

// New way - clean and readable
ArcaneCodeBlock.code(children: [...])
// or
ArcaneCodeBlock(style: CodeBlockStyle.code, children: [...])

Related Components#

• ArcaneCodeSnippet - Code with copy button
• ArcaneInlineCode - Inline code text
• ArcaneText - Regular text