ngx-highlightjs in Angular 20 (SSR and SEO optimized)

Installation

Install the required dependencies:

Full setup (loads the whole library)

Configure provideHighlightOptions to load the full highlight.js library. It is the simplest option, but it ships more JavaScript to the client. This configuration belongs in Angular startup, usually main.ts or app.config.ts depending on your setup.

Reduced setup (SEO and performance)

Load only the highlight.js core plus the languages you really use. This is ideal for SSR projects and SEO-sensitive pages because it reduces bundle size and improves the initial render.

From an SEO perspective, the less JavaScript you send initially and the faster the server can render HTML, the easier it is for search engines to index the content without depending on the client runtime.

Like the full setup, this configuration belongs in Angular startup, usually main.ts or app.config.ts.

Import the theme CSS only where it is used (recommended)

For maximum optimization, import the Highlight theme in the component SCSS that actually uses it instead of loading it globally. If that does not work in your setup, use the global option.

Usage example in an Angular component

In your templates use the Highlight directive and optionally lineNumbers. Remember to set the proper language for more precise highlighting.

The previous snippet shows a standalone component with its imports and configuration. This makes it easy to highlight your own Angular code clearly.