ArcaneJaspr Codex
Documentation
🔍
ArcaneCodeSnippet
Code block with syntax highlighting
Live Demo
dart 
final greeting = "Hello, World!";

ArcaneCodeSnippet#

A code block component with syntax highlighting and optional copy functionality for displaying code examples.

Basic Usage#

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

Properties#

PropertyTypeDefaultDescription
codeStringrequiredCode content
language String? null Language for highlighting
title String? null Optional title/filename
showLineNumbers bool true Display line numbers
showCopyButton bool true Show copy button
highlightLines List<int>? null Lines to highlight
styles ArcaneStyleData? null Additional styling

Supported Languages# 

// Dart
ArcaneCodeSnippet(code: code, language: 'dart')

// JavaScript
ArcaneCodeSnippet(code: code, language: 'javascript')

// TypeScript
ArcaneCodeSnippet(code: code, language: 'typescript')

// HTML
ArcaneCodeSnippet(code: code, language: 'html')

// CSS
ArcaneCodeSnippet(code: code, language: 'css')

// JSON
ArcaneCodeSnippet(code: code, language: 'json')

// YAML
ArcaneCodeSnippet(code: code, language: 'yaml')

// Shell/Bash
ArcaneCodeSnippet(code: code, language: 'bash')

With Title#

ArcaneCodeSnippet(
  title: 'main.dart',
  language: 'dart',
  code: '''
void main() {
  runApp(MyApp());
}
''',
)

Without Line Numbers# 

ArcaneCodeSnippet(
  code: 'npm install arcane-jaspr',
  language: 'bash',
  showLineNumbers: false,
)

Highlighted Lines#

ArcaneCodeSnippet(
  language: 'dart',
  highlightLines: [3, 4, 5],
  code: '''
class MyApp extends StatelessComponent {
  @override
  Iterable<Component> build(BuildContext context) sync* {
    yield ArcaneApp(
      child: HomePage(),
    );
  }
}
''',
)

Examples#

Installation Command# 

ArcaneColumn(
  gap: Gap.md,
  children: [
    ArcaneHeading(text: 'Installation', level: HeadingLevel.h3),
    ArcaneCodeSnippet(
      language: 'bash',
      showLineNumbers: false,
      code: 'dart pub add arcane_jaspr',
    ),
  ],
)

Component Example#

ArcaneColumn(
  gap: Gap.md,
  children: [
    ArcaneHeading(text: 'Basic Usage', level: HeadingLevel.h3),
    ArcaneCodeSnippet(
      title: 'example.dart',
      language: 'dart',
      code: '''
ArcaneButton(
  label: 'Click Me',
  onPressed: () {
    print('Button pressed!');
  },
)
''',
    ),
  ],
)

Configuration File# 

ArcaneCodeSnippet(
  title: 'pubspec.yaml',
  language: 'yaml',
  code: '''
dependencies:
  jaspr: ^0.15.0
  arcane_jaspr: ^1.0.0

dev_dependencies:
  jaspr_builder: ^0.15.0
  build_runner: ^2.4.0
''',
)

API Response#

ArcaneCodeSnippet(
  title: 'response.json',
  language: 'json',
  code: '''
{
  "status": "success",
  "data": {
    "id": 123,
    "name": "John Doe",
    "email": "john@example.com"
  }
}
''',
)

Multi-file Example# 

ArcaneTabs(
  variant: TabsVariant.boxed,
  tabs: [
    ArcaneTab(
      label: 'main.dart',
      content: ArcaneCodeSnippet(
        language: 'dart',
        code: mainDartCode,
      ),
    ),
    ArcaneTab(
      label: 'home_page.dart',
      content: ArcaneCodeSnippet(
        language: 'dart',
        code: homePageCode,
      ),
    ),
    ArcaneTab(
      label: 'styles.css',
      content: ArcaneCodeSnippet(
        language: 'css',
        code: stylesCode,
      ),
    ),
  ],
)

Inline Comparison#

ArcaneRow(
  gap: Gap.lg,
  children: [
    ArcaneExpanded(
      child: ArcaneColumn(
        gap: Gap.sm,
        children: [
          ArcaneText('Before'),
          ArcaneCodeSnippet(
            language: 'dart',
            code: beforeCode,
          ),
        ],
      ),
    ),
    ArcaneExpanded(
      child: ArcaneColumn(
        gap: Gap.sm,
        children: [
          ArcaneText('After'),
          ArcaneCodeSnippet(
            language: 'dart',
            code: afterCode,
          ),
        ],
      ),
    ),
  ],
)