Code Block

선택적 테마 대응 구문 강조와 명시적 줄바꿈으로 여러 줄 코드를 표시해요.

핵심 속성

설치

패키지를 추가한 뒤 공개 라이브러리를 가져오세요.

flutter pub add tinyrack_ui

import 'package:tinyrack_ui/tinyrack_ui.dart';

애플리케이션에서 사용하는 구문 엔진을 TRCodeHighlighter에 맞춘 뒤 코드 블록 상위에 제공하세요. 지원 언어, 토큰 스타일, 밝고 어두운 색상은 하이라이터가 관리하고, null을 반환하면 미지원 언어로 처리해요.

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

final dartKeywords = RegExp(r'\b(class|const|final|return|void)\b');

Future<TRCodeHighlightResult?> appCodeHighlighter(
  TRCodeHighlightRequest request,
) async {
  if (request.language != 'dart') return null;
  final keywordColor = request.brightness == Brightness.dark
      ? Colors.lightBlueAccent
      : Colors.blue;
  final spans = <TextSpan>[];
  var offset = 0;

  for (final match in dartKeywords.allMatches(request.code)) {
    if (match.start > offset) {
      spans.add(TextSpan(text: request.code.substring(offset, match.start)));
    }
    spans.add(
      TextSpan(
        text: match.group(0),
        style: TextStyle(color: keywordColor),
      ),
    );
    offset = match.end;
  }
  if (offset < request.code.length) {
    spans.add(TextSpan(text: request.code.substring(offset)));
  }
  return TRCodeHighlightResult(span: TextSpan(children: spans));
}

void main() {
  runApp(
    TRCodeHighlighterProvider(
      highlighter: appCodeHighlighter,
      child: const App(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: TinyrackTheme.light(),
      darkTheme: TinyrackTheme.dark(),
      home: const Scaffold(
        body: TRCodeBlock(
          code: 'final status = "healthy";',
          language: 'dart',
        ),
      ),
    );
  }
}

플레이그라운드

사용법

import 'package:material_ui/material_ui.dart';
import 'package:tinyrack_ui/tinyrack_ui.dart';

const TRCodeBlock(
  code: "final status = 'healthy';",
  language: 'dart',
)

예시

API

하이라이터 미설정, 미지원 언어, 예외 상황에서도 원본 소스를 계속 표시해요. 블록이나 프로바이더의 onHighlightFailure로 결과를 처리하세요.