ngx-highlightjs with Angular SSR

2026 reading note: NgModule example vs standalone Angular

This article keeps the original NgModule-based configuration because it is useful for maintaining older Angular Universal projects. In modern Angular applications, especially standalone projects, the same idea usually moves to app.config.ts or the application provider setup.

For new projects, prefer the reduced configuration: load highlight.js core and only the languages used by the page. If you are using Angular 20-style standalone APIs, the newer related article shows the provider-based setup.

Installation

As shown in the video, the basic installation can be done with the following command:

Setup for a non-SEO environment

After this base setup, if you want a version that is not adapted for Angular SEO, you only need to apply the following changes to app.module.ts:

You will also modify angular.json:

Setup for an SEO and SSR environment

In an SSR environment the setup is slightly different. The import is performed through a function. In this example it is called getHighlightLanguages():

Production checklist

For a real site, avoid importing the complete highlight.js package if you only need a small set of languages. Loading the core library and registering only TypeScript, HTML, CSS, Bash or Python usually keeps the bundle smaller.

The highlighted code should remain readable in the server-rendered HTML. Syntax coloring can improve the hydrated experience, but crawlers and users without JavaScript still need visible code, headings and surrounding explanation.

Alternatives and related Angular SEO work

If the page has many code blocks, combine syntax highlighting with lazy components, clear canonical URLs and internal links toward the rest of your Angular SSR content.

• Angular SEO with SSR
• SSR code highlighting in Angular
• external JavaScript in Angular

Conclusion

ngx-highlightjs is useful when the tutorial depends on readable code examples, but the SEO-friendly configuration is the one that limits languages, avoids loading unnecessary JavaScript and keeps the article understandable before hydration.