Angular Highlight.js directives

Angular code highlighting directives with optional line numbers and support for SSR.

Quick links

• Demo
• Getting started
• Extras
• API docs

Installing

npm install --save nxt-highlightjs highlight.js

Load and configure Highlight.js

import { ApplicationConfig } from '@angular/core'
import { provideHighlightOptions } from 'nxt-highlightjs'

export const appConfig: ApplicationConfig = {
    providers: [
        provideHighlightOptions({
            fullLibraryLoader: () => import('highlight.js')
        })
    ]
}

Above code loads the entire Highlight.js library. To improve performance you might want to load only the core library and neccesary languages.

import { ApplicationConfig } from '@angular/core'
import { provideHighlightOptions } from 'nxt-highlightjs'

export const appConfig: ApplicationConfig = {
    providers: [
        provideHighlightOptions({
            coreLibraryLoader: () => import('highlight.js/lib/core'),
            lineNumbersLoader: () => import('nxt-highlightjs/line-numbers'), // Optional, add line numbers if needed
            languages: {
                typescript: () => import('highlight.js/lib/languages/typescript'),
                css: () => import('highlight.js/lib/languages/css'),
                xml: () => import('highlight.js/lib/languages/xml')
            },
            themePath: 'path-to-theme.css' // Optional, useful for dynamic theme changes
        })
    ]
}

Use it in a template

<pre><code [nxtHighlight]="code"
    language="html"></code></pre>