ArcaneJaspr Codex
Documentation
🔍
ArcaneCodeWindow
Code display with macOS-style window chrome
Live Demo
main.dart
void main() {
  print('Hello, World!');
}
Terminal
$ dart run
Hello, World!
$

ArcaneCodeWindow#

A code display component with macOS-style window chrome (traffic light buttons) for showcasing code snippets.

Basic Usage#

ArcaneCodeWindow(
  title: 'main.dart',
  code: '''
void main() {
  print('Hello, World!');
}
''',
)

Properties#

ArcaneCodeWindow#

PropertyTypeDefaultDescription
codeStringrequiredCode content
title String? null Window title
style CodeWindowStyle dark Window style
showButtons bool true Show traffic light buttons
codeColor String? null Custom code color

ArcaneCodeSnippet#

PropertyTypeDefaultDescription
codeStringrequiredCode content
language String? null Language label
mono bool true Use monospace font

Styles#

// Dark (default)
ArcaneCodeWindow(
  code: 'console.log("Hello");',
  style: CodeWindowStyle.dark,
)

// Light
ArcaneCodeWindow(
  code: 'console.log("Hello");',
  style: CodeWindowStyle.light,
)

// Terminal
ArcaneCodeWindow.terminal(
  title: 'Terminal',
  code: '\$ npm install\n\$ npm run dev',
)

Examples#

Code Example#

ArcaneCodeWindow(
  title: 'app.tsx',
  code: '''
import React from 'react';

export function App() {
  return <h1>Hello World</h1>;
}
''',
)

Terminal Commands#

ArcaneCodeWindow.terminal(
  title: 'Terminal',
  code: '''
\$ dart pub get
Resolving dependencies...
Got dependencies!

\$ dart run
Hello, World!
''',
)

Simple Code Snippet#

ArcaneCodeSnippet(
  language: 'dart',
  code: 'print("Hello, World!");',
)

Installation Instructions# 

ArcaneColumn(
  gapSize: Gap.md,
  children: [
    ArcaneCodeWindow.terminal(
      title: 'Install',
      code: '\$ dart pub add arcane_jaspr',
    ),
    ArcaneCodeWindow(
      title: 'main.dart',
      code: "import 'package:arcane_jaspr/arcane_jaspr.dart';",
    ),
  ],
)