CodeSnippet#

코드를 구문 강조(syntax highlighting)와 함께 표시하는 컴포넌트입니다. 줄 번호 표시, 복사 버튼, 다양한 테마를 지원합니다.

Live Preview#

void main() {
  print('Hello, CoUI!');
}

class CodeSnippetDefaultExample extends StatefulComponent {
  const CodeSnippetDefaultExample({super.key});

  @override
  State<CodeSnippetDefaultExample> createState() =>
      _CodeSnippetDefaultExampleState();
}

class _CodeSnippetDefaultExampleState
    extends State<CodeSnippetDefaultExample> {
  @override
  Component build(BuildContext context) {
    return CoCodeSnippet(
      code: "void main() {\n  print('Hello, CoUI!');\n}",
      mode: 'dart',
      showLineNumbers: true,
      showCopyButton: true,
    );
  }
}

class CodeSnippetDefaultExample extends StatefulWidget {
  const CodeSnippetDefaultExample({super.key});

  @override
  State<CodeSnippetDefaultExample> createState() =>
      _CodeSnippetDefaultExampleState();
}

class _CodeSnippetDefaultExampleState
    extends State<CodeSnippetDefaultExample> {
  @override
  Widget build(BuildContext context) {
    return CoCodeSnippet(
      code: "void main() {\n  print('Hello, CoUI!');\n}",
      mode: 'dart',
      showLineNumbers: true,
      showCopyButton: true,
    );
  }
}

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 문서, 튜토리얼, 도움말 페이지에서 코드 예시를 보여줄 때
• API 응답이나 설정 파일 내용을 사용자에게 표시할 때
• 코드 복사 기능이 필요한 개발자 도구나 대시보드를 구현할 때

대신 다른 컴포넌트를 사용하세요:

• Kbd: 키보드 단축키나 단일 명령어를 인라인으로 표시할 때
• Text: 단순 텍스트 정보를 표시할 때 (코드가 아닌 경우)

기본 사용법 (Basic Usage)#

// 기본 코드 블록
CoCodeSnippet(
  code: '''
void main() {
  print('Hello, CoUI!');
}''',
  mode: 'dart',
)

// 줄 번호와 복사 버튼 포함
CoCodeSnippet(
  code: '''
import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Hello');
  }
}''',
  mode: 'dart',
  showLineNumbers: true,
  showCopyButton: true,
)

// 기본 코드 블록
CoCodeSnippet(
  code: '''
void main() {
  print('Hello, CoUI!');
}''',
  mode: 'dart',
)

// 줄 번호 표시
CoCodeSnippet(
  code: '''
import 'package:jaspr/jaspr.dart';

void main() {
  runApp(App());
}''',
  mode: 'dart',
  showLineNumbers: true,
)

Props / Parameters#

동작 스펙 (Behavior)#

인터랙션#

• 복사 버튼 클릭: 클립보드에 코드 복사 후 토스트 알림 표시 (Flutter) / Copy 버튼 클릭 이벤트 (Web)
• 스크롤: 코드 영역 내에서 수직/수평 스크롤 가능
• 호버 (복사 버튼): 버튼 강조 표시

토큰 기반 스타일링#

CoCodeSnippet은 coui_core의 CoreCodeSnippetTokens를 사용하여 크로스 플랫폼 일관된 스타일링을 제공합니다.

사용 가이드라인 (Usage Guidelines)#

Do#

CoCodeSnippet(
  code: 'SELECT * FROM users WHERE active = true;',
  mode: 'sql',
  showCopyButton: true,
)

Don't#

// Flutter에서는 constraints로 제한
CoCodeSnippet(
  code: entireFileContent,
  mode: 'dart',
  constraints: BoxConstraints(maxHeight: 300),
)

접근성 (Accessibility)#

키보드 인터랙션#

스크린 리더#

• Flutter: Semantics(value: code) 적용
• Web: <code> 태그 사용, 복사 버튼에 aria-label="Copy code" 적용

크로스 플랫폼 차이점 (Platform Differences)#

관련 컴포넌트 (Related Components)#

• Kbd: 인라인 키보드 단축키 표시에 사용
• Text: 코드가 아닌 일반 텍스트 표시에 사용