app.config.ts

import { provideHighlightOptions } from 'ngx-highlightjs';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHighlightOptions({
      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
      coreLibraryLoader: () => import('highlight.js/lib/core'),
      languages: {
        typescript: () => import('highlight.js/lib/languages/typescript'),
        css: () => import('highlight.js/lib/languages/css'),
        xml: () => import('highlight.js/lib/languages/xml')
      },
      themePath: 'assets/styles/androidstudio.css'
    })
  ]
};

app2.config.ts

import { provideHighlightOptions } from 'ngx-highlightjs';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHighlightOptions({
      fullLibraryLoader: () => import('highlight.js'),
      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'),
      themePath: 'assets/styles/androidstudio.css'
    })
  ]
};

highlight-auto.ts

import { HighlightAuto } from 'ngx-highlightjs';
import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';

@Component({
  selector: 'app-root',
  template: `
    <pre><code [highlightAuto]="code" lineNumbers></code></pre>
  `,
  standalone: true,
  imports: [HighlightAuto, HighlightLineNumbers]
})
export class AppComponent {
}

highlight.ts

import { Highlight } from 'ngx-highlightjs';
import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';

@Component({
  selector: 'app-root',
  template: `
    <pre><code [highlight]="code" language="html" lineNumbers></code></pre>
  `,
  standalone: true,
  imports: [Highlight, HighlightLineNumbers]
})
export class AppComponent {
}

Installation

npm install ngx-highlightjs