Ngx-highlightjs con Angular SSR

ejemplo NgModule frente a Angular standalone: qué ha cambiado

Este artículo conserva la configuración original basada en NgModule porque sigue siendo útil para mantener proyectos Angular Universal antiguos. En aplicaciones Angular modernas, sobre todo standalone, la misma idea suele moverse a app.config.ts o a la configuración de providers de la aplicación.

Para proyectos nuevos, prioriza la configuración reducida: cargar el core de highlight.js y solo los lenguajes usados por la página. Si trabajas con APIs standalone estilo Angular 20, el artículo relacionado más nuevo muestra la configuración basada en providers.

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:

 npm i ngx-highlightjs

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:

 import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';

@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        fullLibraryLoader: () => import('highlight.js'),
        lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, only if you want the line numbers

      }
    }
  ],
})
export class AppModule { }

Y también modificaremos el fichero angular.json:

  "styles": [
    "styles.css",
    "../node_modules/highlight.js/styles/github.css",
  ]

Adaptación para un entorno con SEO y SSR

En un entorno SSR la modificacion es un poco diferente. La importacion la realizaremos mediante una funcion, en este caso, la he llamado getHighlightLanguages():

 import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';

export function getHighlightLanguages() {
  return {
    useValue: {
      coreLibraryLoader: () => import('highlight.js/lib/core'),
      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, only if you want the line numbers
      languages: {
        typescript: () => import('highlight.js/lib/languages/typescript'),
        css: () => import('highlight.js/lib/languages/css'),
        xml: () => import('highlight.js/lib/languages/xml'),
        python: () => import('highlight.js/lib/languages/python'),
        bash: () => import('highlight.js/lib/languages/bash'),
      }
    }
  };
}

@NgModule({
  imports: [
    HighlightModule
  ],
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: getHighlightLanguages()
    }
  ],
})
export class AppModule { }

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.

• SEO en Angular con SSR
• resaltado de código SSR en Angular
• JavaScript externo en Angular

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.