Ngx-highlightjs en Angular Universal
En este proyecto vamos a instalar la libreria Ngx-highlightjs en Angular Universal tal y como avanzamos en el video https://www.youtube.com/watch?v=uwiHVmB3qw8
Instalación
Cómo se ha visto en el video, la instalación básica se puede llevar a cabo con el siguiente cómando:
Adaptación para un entorno sin SEO
Una vez realizada está modificación, si queremos ejecutar una versión no adaptada al SEO de Angular únicamente deberemos aplicar las siguientes modificaciones al fichero app.module.ts:
Y también modificaremos el fichero angular.json:
Adaptación para un entorno con SEO (Angular Universal)
En el caso de Angular Universal la modificación es un poco diferente. La importación la realizaremos mediante una función, en este caso, la he llamado getHighlightLanguages():
Checklist para producción
En una web real conviene evitar importar todo highlight.js si solo necesitas unos pocos lenguajes. Cargar el core y registrar únicamente TypeScript, HTML, CSS, Bash o Python suele mantener el bundle más pequeño.
El código resaltado debe seguir siendo legible en el HTML renderizado por servidor. El coloreado mejora la experiencia hidratada, pero los crawlers y los usuarios sin JavaScript también necesitan código visible, encabezados y explicación alrededor.
Alternativas y trabajo relacionado en SEO Angular
Si la página tiene muchos bloques de código, combina el resaltado de sintaxis con componentes diferidos, canonical claros y enlaces internos hacia el resto de contenido Angular SSR.
Conclusión
ngx-highlightjs es útil cuando el tutorial depende de ejemplos de código legibles, pero la configuración SEO-friendly es la que limita lenguajes, evita cargar JavaScript innecesario y mantiene el artículo comprensible antes de la hidratación.