ngx-highlightjs in Angular Universal

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 environment (Angular Universal)

In Angular Universal 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.