Angular Highlight.js directives


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

Quick links

- Demo
- Getting started
- Extras
- API docs

$3

``sh
npm install --save nxt-highlightjs highlight.js
`

$3

`ts
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.

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

$3

`html

    language="html">

``