レンダリング

ブロックの形状は、ブロックの定義（つまりフィールドと接続）に基づいてレンダラによって決定されます。

組み込みレンダラ

Blockly には 3 つの組み込みレンダラがあり、それぞれプログラムの雰囲気が若干異なります。

レンダリング	説明	画像
Thrasos	推奨されるレンダラ。これは geras レンダラを現代的に改良し、より均等な間隔と実線の枠線を使用します。
Geras	デフォルトのレンダラ。これは、Blockly が構築に使用した元のレンダラです。
ゼロ	Scratch-3.0 ブロック デザインをベースにしたレンダラ。

これらのレンダラのいずれかを使用するには、名前をインジェクション オプションに渡します。

Blockly.inject('blocklyDiv', {
  renderer: 'thrasos'
});

カスタム レンダラ

プログラムの外観を組み込みのレンダラとは異なるデザインにする場合は、カスタム レンダラを作成することもできます。Blockly ではまず、次のことをおすすめします。

1. レンダラのコンセプトに関するドキュメントを読み、レンダラのすべてのコンポーネントの連携の仕組みを確認してください。
2. カスタム レンダラの Codelab を完了し、カスタム レンダリングの実践演習を行います。
3. プロジェクトにデバッグ レンダラを追加します。
4. レンダラをカスタマイズします。