Ngx-highlightjs en Angular 20 (SSR/SEO optimizado)
En este proyecto instalamos y configuramos ngx-highlightjs con Angular 20 standalone, mostrando una version completa y una version reducida orientada a SEO y rendimiento. Video relacionado: https://www.youtube.com/watch?v=uwiHVmB3qw8
Instalacion
Instala las dependencias necesarias:
Version completa (carga toda la libreria)
Configura provideHighlightOptions para cargar todo highlight.js. Es la opcion mas sencilla, pero envia mas JavaScript al cliente. Esta configuracion se coloca en el fichero de arranque de Angular: main.ts o app.config.ts dependiendo de tu instalacion.
Version reducida (SEO / performante)
Carga solo el core de highlight.js y los lenguajes que realmente vas a usar. Ideal para proyectos con SSR y orientados a SEO, porque reduce el tamano del bundle y mejora el render inicial.
En terminos de SEO, cuanto menor sea el peso inicial de JavaScript y mas rapido se renderice el HTML en el servidor, mas facil sera para Google indexar el contenido sin depender de la ejecucion completa del cliente.
Igual que la version completa, esta configuracion se coloca en el fichero de arranque de Angular: main.ts o app.config.ts dependiendo de tu instalacion.
Importa el CSS del tema solo donde se use (recomendado)
Para optimizar al maximo, importa el tema de Highlight en el SCSS del componente que lo utilice, en lugar de hacerlo global. Si no te funciona utiliza la opcion global.
Opcion global
Tambien puedes anadir el CSS del tema globalmente en angular.json, pero cargaras el estilo en todas las paginas.
Ejemplo de uso en un componente Angular
En tus plantillas usa la directiva Highlight y, si lo deseas, lineNumbers. Recuerda marcar el language correspondiente para un resaltado mas preciso.
El ejemplo anterior muestra la definicion de un componente standalone con sus imports y configuracion. Asi podras resaltar de forma clara cualquier fragmento de tu propio codigo Angular.