Tinyrack

Code Block

スクロール可能な等幅サーフェスに複数行のコードを表示します。

任意のテーマ対応構文ハイライトと明示的な折り返しで、複数行のコードを表示します。

主なプロパティ

プロパティ値既定値
language設定したハイライターが処理する識別子プレーンテキスト
ハイライターhighlighter プロパティ、TRCodeHighlighterProvider、なしなし
構文テーマ明るさごとにアプリケーションのハイライターが定義プレーンテキストの色
wraptrue、falsefalse

インストール

パッケージを追加し、公開ライブラリをインポートしてください。

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',
)

例

ハイライトされた Dart パーマリンク

ハイライターを設定した後に language を渡すと、テーマに対応した構文色を表示できます。

表示モード パーマリンク

プレーンテキストでは language を省略し、ハイライトにはハイライターが対応する識別子を選び、幅が限られるレイアウトでは wrap を有効にします。

ブロック単位の上書き パーマリンク

1 つのブロックだけプロバイダーと異なる対応言語やトークン色が必要な場合は、highlighter を直接渡します。

末尾のアクション パーマリンク

trailing を渡すと、コードにかからない右上の角にアクションを固定できます。折り返さないブロックは、ポインターが端を越えてドラッグしている間に横スクロールするため、長い行の末尾まで選択できます。

API

ハイライター未設定、未対応言語、例外のいずれでも元のソースを表示し続けます。ブロックまたはプロバイダーの onHighlightFailure で結果を処理してください。

プロパティ型既定値説明
codeString必須表示するソーステキストです。
languageString?nullハイライターに渡す言語識別子です。プレーンテキストでは省略します。
highlighterTRCodeHighlighter?プロバイダー値このブロックだけプロバイダーを上書きします。
onHighlightFailureValueChanged<TRCodeHighlightFailure>?プロバイダー値noHighlighter、unsupportedLanguage、highlightFailed を受け取ります。
wrapboolfalse水平スクロールの代わりに長い行を折り返します。