レンダラ

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

組み込みレンダラ

Blockly には 3 つの組み込みレンダラが用意されており、それぞれでプログラムの雰囲気が少し異なります。

レンダリング	説明	画像
Thrasos	推奨されるレンダラ。より均等な間隔と実線ボーダーを備えた、geras レンダラをよりモダンにしたものです。
Geras	デフォルトのレンダラ。Blockly の構築に使用された元のレンダラです。
Zelos	Scratch 3.0 のブロック設計に基づくレンダラ。

これらのレンダラを使用するには、名前を構成オプションに渡します。

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

カスタム レンダラ

プログラムに組み込みのレンダラとは異なるルック アンド フィールを与えたい場合は、カスタム レンダラを作成することもできます。Blockly チームは、以下のことをおすすめします。

1. レンダラ コンセプトのドキュメントを読み、レンダラのすべてのコンポーネントがどのように組み合わされているかを確認します。
2. カスタム レンダラ Codelab を完了して、カスタム レンダリングを実践的に学習します。
3. デバッグ レンダラをプロジェクトに追加します。
4. レンダラをカスタマイズします。