Como funciona o embelecimento de HTML
O embelezador lê a sua marcação tag a tag, regista o nível de aninhamento de cada elemento e re-emite-o com recuo consistente. Nunca altera o que a página renderiza — apenas a forma como o código-fonte está organizado.
- Analisar as tags. A biblioteca analisa a sua entrada numa sequência de tokens: tags de abertura, tags de fecho, conteúdo de texto, comentários e o conteúdo dos blocos de script e style. Os valores de atributos entre aspas e o corpo dos elementos pre e textarea são tratados como unidades individuais, pelo que os espaços em branco dentro deles ficam intactos.
- Acompanhar o aninhamento. À medida que percorre a sequência de tokens, o embelezador mantém um nível de recuo corrente. Cada tag de abertura que não seja de autofecho empurra o nível um passo acima; cada tag de fecho correspondente retira-o. Essa profundidade decide quantas unidades de recuo precedem cada linha devolvida.
- Aplicar as suas opções. A sua escolha de recuo — 2 espaços, 4 espaços ou uma tabulação — define a largura de um nível. O valor de ajuste de coluna quebra linhas longas de atributos ou texto assim que ultrapassam a coluna escolhida. O limite de linhas em branco colapsa longas sequências de linhas vazias até ao limite que definiu.
- Re-emitir a marcação. Por fim, o formatador imprime as tags com o recuo e as quebras de linha calculados. Se ativou o formato inline, o conteúdo de cada bloco style passa pelo formatador CSS e cada bloco script pelo formatador JS, de modo que o código incorporado fica alinhado com a marcação que o rodeia.
Por que embelezar HTML
- Ler páginas minificadas. O HTML de produção é distribuído sem quebras de linha para poupar bytes. Embelezar repõe a estrutura para que possa encontrar a secção que procura, detetar uma tag de fecho em falta e perceber como o documento realmente aninha.
- Organizar templates inconsistentes. A marcação que várias pessoas editaram deriva para recuos e posicionamentos de tags mistos. Uma única passagem pelo embelezador normaliza o ficheiro inteiro, de modo que o próximo commit mostra a alteração efetuada em vez de uma parede de espaços em branco reformatados.
- Não atrasa a sua página. A maioria dos formatadores online carrega a sua biblioteca completa no momento em que abre a página. Este carrega js-beautify apenas quando clica em Embelezar ou ativa o Modo ao vivo, por isso a primeira carga custa alguns kilobytes em vez de algumas centenas e a página mantém-se rápida.
- Nada sai do seu navegador. Tudo corre no seu dispositivo. A sua marcação nunca é carregada para um servidor, o que importa quando a página pertence a um cliente, contém URLs internas ou está sujeita a um acordo de confidencialidade.
Aplicações comuns
Embelezar HTML surge sempre que alguém precisa de ler marcação que não foi escrita para ser lida.
- Inspecionar uma página em produção: cole o código-fonte minificado do Ver Código Fonte para encontrar a marcação por detrás de um bug de layout que não consegue reproduzir localmente.
- Limpar a saída de um CMS: reformate um template que um construtor de páginas exportou numa única linha antes de o confirmar de volta ao repositório.
- Revisões de acessibilidade e SEO: expanda o documento para verificar a ordem dos cabeçalhos, a estrutura dos landmarks e os atributos alt em relação ao DOM real.
Um exemplo prático
Pegue num fragmento minificado: <div><p>hi</p><span>x</span></div>. Cole-o acima com recuo de 2 espaços e clique em Embelezar. Obtém de volta um bloco legível: o <div> na sua própria linha, o <p>hi</p> e o <span>x</span> cada um indentado um nível, e o </div> correspondente alinhado por baixo. Mude o recuo para Tabulações e cada nível passa de dois espaços para uma tabulação. Adicione um bloco <style>a{color:red}</style>, ative "Também formatar CSS e JS inline" e a regra expande-se para as suas próprias linhas com recuo em vez de ficar numa só.
FAQ
Isto corre no meu navegador?
Sim. A biblioteca js-beautify é carregada de forma lazy na primeira vez que clica em Embelezar ou ativa o Modo ao vivo, depois fica em cache. A sua marcação nunca sai da página — não há chamada ao servidor nem upload.
Embelezar vai mudar como a minha página é renderizada?
Não. O embelezador apenas adiciona e remove espaços em branco e quebras de linha entre tags. O navegador ignora esse espaço em branco quando constrói a página, pelo que o resultado renderizado é idêntico. O único aspeto a considerar é o conteúdo sensível a espaços dentro de pre, textarea ou elementos inline, que o formatador deixa intencionalmente intacto.
O que faz o interruptor de CSS e JS inline?
Com ele desativado, o conteúdo dos blocos style e script é deixado exatamente como o colou. Ao ativá-lo, o CSS dentro de cada bloco style passa pelo formatador CSS e o JavaScript dentro de cada bloco script pelo formatador JS, de modo que o código incorporado fica com recuo que corresponde à marcação circundante.
O que faz "Ajustar na coluna"?
Define o comprimento de linha a partir do qual uma tag com muitos atributos, ou um texto longo, é dividida em várias linhas. Deixe em 0 para manter cada elemento numa única linha independentemente do tamanho. Defina para 80 ou 120 e o formatador quebra tudo o que ultrapasse essa coluna, mantendo elementos largos legíveis num editor estreito.
O embelecimento de HTML no lado do navegador dá-lhe marcação legível sem um passo de compilação nem um upload. Cole uma página minificada ou desorganizada, escolha o seu recuo e largura de ajuste, decida se reformata o CSS e JS inline, depois copie ou faça download do resultado. Nada sai do seu dispositivo, não há conta e a biblioteca só carrega quando a pede — por isso abrir esta página custa-lhe alguns kilobytes, não um megabyte.