Getting started with nxt-highlightjs

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
        })
    ]
}

Include it in HTML template

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

Configuration options

[nxtHighlight]

InputTypeDefault valueDescription
[nxtHighlight]string | nullundefined

Code to highlight

[language]stringundefined

The language name highlight only one language

[ignoreIllegals]boolean, unknownundefined

An optional flag, when set to true it forces highlighting to finish even in case of detecting illegal syntax for the language instead of throwing an exception

OutputTypeDescription
(highlighted)HighlightResult

Stream that emits when code string is highlighted


[nxtHighlightAuto]

InputTypeDefault valueDescription
[nxtHighlightAuto]string | nullundefined

Code to highlight

[languages]string[]undefined

An optional array of language names and aliases restricting detection to only those languages

The subset can also be set with configure, but the local parameter overrides the option if set.

OutputTypeDescription
(highlighted)AutoHighlightResult

Stream that emits when code string is highlighted