Cómo funciona el embellecimiento de HTML
El embellecedor lee tu marcado etiqueta a etiqueta, rastrea el nivel de anidamiento de cada elemento y lo reemite con sangría consistente. Nunca cambia lo que la página renderiza — solo cómo está organizado el código fuente.
- Analizar las etiquetas. La biblioteca escanea tu entrada en una secuencia de tokens: etiquetas de apertura, etiquetas de cierre, contenido de texto, comentarios y el contenido de los bloques de script y style. Los valores de atributos entre comillas y el cuerpo de los elementos pre y textarea se tratan como unidades únicas, por lo que los espacios en blanco dentro de ellos se dejan intactos.
- Seguir el anidamiento. Al recorrer la secuencia de tokens, el embellecedor mantiene un nivel de sangría en ejecución. Cada etiqueta de apertura que no sea de autocierre aumenta el nivel un paso; cada etiqueta de cierre correspondiente lo disminuye. Esa profundidad determina cuántas unidades de sangría preceden a cada línea del resultado.
- Aplicar tus opciones. Tu elección de sangría — 2 espacios, 4 espacios o un tabulador — define el ancho de un nivel. El valor de ajuste de columna divide las líneas largas de atributos o texto una vez que superan la columna elegida. El límite de líneas en blanco colapsa las largas series de líneas vacías hasta el límite establecido.
- Reemitir el marcado. Finalmente, el formateador imprime las etiquetas con la sangría y los saltos de línea calculados. Si activaste el formato en línea, el contenido de cada bloque style pasa por el formateador CSS y cada bloque script por el formateador JS, de modo que el código incrustado queda alineado con el marcado que lo rodea.
Por qué embellecer HTML
- Leer páginas minificadas. El HTML de producción se distribuye sin saltos de línea para ahorrar bytes. Embellecerlo restaura la estructura para que puedas encontrar la sección que buscas, detectar una etiqueta de cierre faltante y seguir cómo anida realmente el documento.
- Ordenar plantillas inconsistentes. El marcado que varias personas han editado deriva hacia sangrías y ubicaciones de etiquetas mixtas. Una sola pasada por el embellecedor normaliza todo el archivo, de modo que el siguiente commit muestra el cambio realizado en lugar de una pared de espacios en blanco reformateados.
- No ralentiza tu página. La mayoría de los formateadores en línea cargan toda su biblioteca en el momento en que abres la página. Este carga js-beautify solo cuando haces clic en Embellecer o activas el modo en vivo, por lo que la primera carga cuesta unos pocos kilobytes en lugar de cientos y la página sigue siendo rápida.
- Nada sale de tu navegador. Todo funciona en tu dispositivo. Tu marcado nunca se carga en un servidor, lo que importa cuando la página pertenece a un cliente, contiene URLs internas o está sujeta a un acuerdo de confidencialidad.
Aplicaciones comunes
Embellecer HTML surge siempre que alguien necesita leer marcado que no fue escrito para ser leído.
- Inspeccionar una página en vivo: pega el código fuente minificado de Ver código fuente para encontrar el marcado detrás de un error de diseño que no puedes reproducir localmente.
- Limpiar la salida de un CMS: reformatea una plantilla que un constructor de páginas exportó en una sola línea antes de confirmarla de nuevo en el repositorio.
- Revisiones de accesibilidad y SEO: expande el documento para comprobar el orden de los encabezados, la estructura de los landmarks y los atributos alt frente al DOM real.
Un ejemplo práctico
Toma un fragmento minificado: <div><p>hi</p><span>x</span></div>. Pégalo arriba con sangría de 2 espacios y haz clic en Embellecer. Obtienes de vuelta un bloque legible: el <div> en su propia línea, el <p>hi</p> y el <span>x</span> cada uno con un nivel de sangría, y el </div> correspondiente alineado debajo. Cambia la sangría a Tabuladores y cada nivel pasa de dos espacios a un tabulador. Añade un bloque <style>a{color:red}</style>, activa "También formatear CSS y JS en línea" y la regla se expande en sus propias líneas con sangría en lugar de quedarse en una sola.
FAQ
¿Esto se ejecuta en mi navegador?
Sí. La biblioteca js-beautify se carga de forma diferida la primera vez que haces clic en Embellecer o activas el modo en vivo, y luego se almacena en caché. Tu marcado nunca abandona la página — no hay llamada al servidor ni carga.
¿Embellecer cambiará cómo se renderiza mi página?
No. El embellecedor solo añade y elimina espacios en blanco y saltos de línea entre etiquetas. El navegador ignora ese espacio en blanco cuando construye la página, por lo que el resultado renderizado es idéntico. Lo único a tener en cuenta es el contenido sensible a los espacios dentro de pre, textarea o elementos en línea, que el formateador deja intencionalmente intacto.
¿Qué hace el interruptor de CSS y JS en línea?
Con él desactivado, el contenido de los bloques style y script se deja exactamente como lo pegaste. Al activarlo, el CSS dentro de cada bloque style pasa por el formateador CSS y el JavaScript dentro de cada bloque script por el formateador JS, de modo que el código incrustado queda con sangría que coincide con el marcado circundante.
¿Qué hace "Ajustar en columna"?
Establece la longitud de línea a partir de la cual una etiqueta con muchos atributos, o un texto largo, se divide en varias líneas. Déjalo en 0 para mantener cada elemento en una sola línea sin importar cuán larga sea. Ponlo en 80 o 120 y el formateador ajusta todo lo que pase de esa columna, lo que mantiene los elementos anchos legibles en un editor estrecho.
El embellecimiento de HTML en el navegador te da marcado legible sin un paso de compilación ni una carga. Pega una página minificada o desordenada, elige tu sangría y ancho de ajuste, decide si reformatear el CSS y JS en línea, luego copia o descarga el resultado. Nada sale de tu dispositivo, no hay cuenta y la biblioteca solo se carga cuando la pides — así que abrir esta página te cuesta unos pocos kilobytes, no un megabyte.