Installation

Install with NPM

1npm i ngx-highlightjs

Usage

Use provideHighlightOptions to provide highlight.js options in app.config.ts

1import { provideHighlightOptions } from 'ngx-highlightjs';
2
3export const appConfig: ApplicationConfig = {
4  providers: [
5    provideHighlightOptions({
6      fullLibraryLoader: () => import('highlight.js')
7    })
8  ]
9};

Note: This includes the entire Highlight.js library with all languages.

You can also opt to load only the core script and the necessary languages.

Importing Core Library and Languages

1import { provideHighlightOptions } from 'ngx-highlightjs';
2
3export const appConfig: ApplicationConfig = {
4  providers: [
5    provideHighlightOptions({
6      coreLibraryLoader: () => import('highlight.js/lib/core'),
7      lineNumbersLoader: () => import('ngx-highlightjs/line-numbers'), // Optional, add line numbers if needed
8      languages: {
9        typescript: () => import('highlight.js/lib/languages/typescript'),
10        css: () => import('highlight.js/lib/languages/css'),
11        xml: () => import('highlight.js/lib/languages/xml')
12      },
13      themePath: 'path-to-theme.css' // Optional, useful for dynamic theme changes
14    })
15  ]
16};

HighlightOptions API

Import highlighting theme

Dynamic Approach

Set the theme path in the global configuration to enable dynamic theme changes:

1 providers: [
2  {
3    provide: HIGHLIGHT_OPTIONS,
4    useValue: {
5      // ...
6      themePath: 'assets/styles/solarized-dark.css'
7    }
8  }
9]

Alternatively, import the theme from the app's distribution folder or use a CDN link.

When switching between app themes, call the setTheme(path) method from the HighlightLoader service.

1import { HighlightLoader } from 'ngx-highlightjs';
2
3export class AppComponent {
4
5  private hljsLoader: HighlightLoader = inject(HighlightLoader);
6
7  onAppThemeChange(appTheme: 'dark' | 'light') {
8    this.hljsLoader.setTheme(appTheme === 'dark' ? 'assets/styles/solarized-dark.css' : 'assets/styles/solarized-light.css');
9  }
10}

Traditional Approach

In angular.json:

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

Or directly in src/style.scss:

1@import 'highlight.js/styles/github.css';

Highlight Directive Usage

To apply code highlighting, use the highlight directive. It requires setting the target language, with an optional feature to ignore illegal syntax.

1import { Highlight } from 'ngx-highlightjs';
2
3@Component({
4  standalone: true,
5  selector: 'app-root',
6  template: `
7    <pre><code [highlight]="code" language="html"></code></pre>
8  `,
9  imports: [Highlight]
10})
11export class AppComponent {
12}

Options

HighlightAuto Directive Usage

The highlightAuto directive works the same way but automatically detects the language to apply highlighting.

1import { HighlightAuto } from 'ngx-highlightjs';
2
3@Component({
4  standalone: true,
5  selector: 'app-root',
6  template: `
7    <pre><code [highlightAuto]="code"></code></pre>
8  `,
9  imports: [HighlightAuto]
10})
11export class AppComponent {
12}

Options

Line Numbers Directive Usage

The lineNumbers directive extends highlighted code with line numbers. It functions in conjunction with the highlight and highlightAuto directives.

1import { HighlightAuto } from 'ngx-highlightjs';
2import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';
3
4@Component({
5  standalone: true,
6  selector: 'app-root',
7  template: `
8    <pre><code [highlightAuto]="code" lineNumbers></code></pre>
9  `,
10  imports: [HighlightAuto, HighlightLineNumbers]
11})
12export class AppComponent {
13}

Options

NOTE

During the project build process, you may encounter a warning stating WARNING in ... CommonJS or AMD dependencies can cause optimization bailouts.

To address this warning, include the following configuration in your angular.json file:

1{
2  "projects": {
3    "project-name": {
4      "architect": {
5        "build": {
6          "options": {
7            "allowedCommonJsDependencies": [
8              "highlight.js"
9            ]
10          }
11        }
12      }
13    }
14  }
15}

Plus package

This package provides the following features:

• Utilizes the gists API to highlight code snippets directly from GitHub gists.
• Supports direct code highlighting from URLs.

Usage

To integrate this addon into your project, ensure the presence of HttpClient by importing it into your main.ts file.

1import { provideHttpClient } from '@angular/common/http';
2
3export const appConfig: ApplicationConfig = {
4  providers: [
5    provideHttpClient()
6  ]
7};

Highlight a gist file

1. Use [gist] directive, passing the gist ID as its attribute, to retrieve the response through the (gistLoaded) output event.
2. Upon the emission of (gistLoaded), gain access to the gist response.
3. Use gistContent pipe to extract the file's content from the gist response based on the specified file name.

Example:

1import { HighlightPlusModule } from 'ngx-highlightjs';
2
3@Component({
4  standalone: true,
5  selector: 'app-root',
6  template: `
7    <pre [gist]="gistId" (gistLoaded)="gist = $event">
8      <code [highlight]="gist | gistContent: 'main.js'"></code>
9    </pre>
10  `,
11  imports: [HighlightPlusModule]
12})
13export class AppComponent {
14}

Highlight all gist files

To loop over gist?.files, use keyvalue pipe to pass file name into gistContent pipe.

To highlight all files within a gist, iterate through gist.files and utilize the keyvalue pipe to pass the file name into the gistContent pipe.

Example:

1import { HighlightPlusModule } from 'ngx-highlightjs';
2
3@Component({
4  standalone: true,
5  selector: 'app-root',
6  template: `
7    <ng-container [gist]="gistId" (gistLoaded)="gist = $event">
8      @for (file of gist?.files | keyvalue; track file.key) {
9        <pre><code [highlight]="gist | gistContent: file.key"></code></pre>
10      }
11    </ng-container>
12  `,
13  imports: [HighlightPlusModule, CommonModule]
14})
15export class AppComponent {
16}

Highlight code from URL directly

Use the pipe codeFromUrl with the async pipe to get the code text from a raw URL.

Example:

1import { HighlightPlusModule } from 'ngx-highlightjs';
2
3@Component({
4  standalone: true,
5  selector: 'app-root',
6  template: `
7   <pre>
8     <code [highlight]="codeUrl | codeFromUrl | async"></code>
9   </pre>
10  `,
11  imports: [HighlightPlusModule, CommonModule]
12})
13export class AppComponent {
14}

Providing Gist API secret (Optional)

The package offers the provideHighlightOptions function, allowing you to set your clientId and clientSecret for the gist HTTP requests. You can provide these options in your app.config.ts file as demonstrated below:

1import { provideHttpClient } from '@angular/common/http';
2import { provideHighlightOptions } from 'ngx-highlightjs/plus'
3
4export const appConfig: ApplicationConfig = {
5  providers: [
6    provideHttpClient(),
7    provideGistOptions({
8      clientId: 'CLIENT_ID',
9      clientSecret: 'CLIENT_SECRET'
10    })
11  ]
12};

Issues

Author

Murhaf Sousli

More plugins