O formato de um bloco é determinado por um renderizador, com base na definição do bloco (ou seja, os campos e as conexões dele).
Renderizadores integrados
O Blockly oferece três renderizadores integrados, cada um com uma aparência ligeiramente diferente para o programa.
| Renderizador | Descrição | Imagem |
|---|---|---|
| Thrasos | O renderizador recomendado. É uma versão mais moderna do renderizador geras, com espaçamento mais uniforme e bordas sólidas. |  |
| Geras | O renderizador padrão. É o renderizador original com que o Blockly foi criado. |  |
| Zelos | Um renderizador baseado no design de blocos do Scratch 3.0. |  |
Para usar um desses renderizadores, transmita o nome para as opções de configuração:
Blockly.inject('blocklyDiv', {
renderer: 'thrasos'
});
Renderizadores personalizados
Se você quiser dar ao seu programa uma aparência diferente de qualquer um dos renderizadores integrados, também poderá criar um renderizador personalizado. Para começar, a equipe do Blockly recomenda que você:
- Leia a documentação sobre o conceito de renderizador para saber como todos os componentes de um renderizador funcionam juntos.
- Conclua o codelab de renderizador personalizado para ter prática com a renderização personalizada.
- Adicione o renderizador de depuração ao seu projeto.
- Personalize seu renderizador.