@celesta/code

@celesta/code はコンポジション内に構文色付きのソースコードを描きます。twinkleplop でトークン化し、各行を色の区間を持つ Celesta の Text 1 つで、行の強調を Rect で描くので、ほかのレイヤーと同じく拡縮・フェード・ぼかし・書き出しができます。任意のパッケージで、@celesta/react は依存しません。

最初のコードブロック

import { Assets, Composition, Font, Rect } from '@celesta/react';
import { Code, codeThemes } from '@celesta/code';

const source = `const message: string = 'Hello, Celesta.';
console.log(message);`;

const style = { fontFamily: 'IBM Plex Mono', fontSize: 40, lineHeight: 60 };

export default function Root() {
  return (
    <Composition width={1280} height={480} fps={30} durationInFrames={90}>
      <Assets>
        <Font src="./fonts/IBMPlexMono-Regular.ttf" />
      </Assets>
      <Rect width={1280} height={480} fill="#161418" />
      <Code x={64} y={64} language="ts" style={style} theme={codeThemes.dark}>
        {source}
      </Code>
    </Composition>
  );
}

Code は唯一の子としてソースの文字列を取ります。インデントと末尾の改行も描画の一部なので、文字列内に残してください。

フォント

等幅フォントを使います。Code の既定は JetBrains Mono、24 px、行高は文字サイズの 1.5 倍です。上のように <Font src="…" /> で読み込むか、描画するマシンにインストールします。不足時はほかのテキストと同様にフォールバックします。

props

Code の props

行の強調

highlightLines は指定した行の背後に、幅と行高いっぱいの帯を描きます。コードを入力中でも表示されます。

<Code x={64} y={64} language="ts" style={style} highlightLines={[2]} highlightWidth={1152}>
  {source}
</Code>

フレームに応じてリストを変えると強調も動きます。各帯は軽量なので、拍やキューごとに行を変えられます。

テーマ

codeThemes.dark と codeThemes.light をそのまま使えます。テーマは背景を描かないので、デザインに合う Rect を背後に置きます。組み込みテーマを展開し、必要な値を上書きするとカスタマイズできます。

const theme = {
  ...codeThemes.dark,
  highlightLine: '#a68bbf30',
  tokens: { ...codeThemes.dark.tokens, keyword: '#e0b7ff' },
};

トークン名は twinkleplop の keyword、string、comment、number、function、type、tag_name、attr_name、punctuation、operator などです。JSON のキーは property、文字列値は string と string_escape です。テーマにない名前は foreground を使います。

入力効果・カーソル・トークンへ進みましょう。