Getting started with nxt-highlightjs
Installing
npm install --save nxt-highlightjs highlight.jsLoad 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]
| Input | Type | Default value | Description |
|---|---|---|---|
| [nxtHighlight] | string | null | undefined | Code to highlight |
| [language] | string | undefined | The language name highlight only one language |
| [ignoreIllegals] | boolean, unknown | undefined | 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 |
| Output | Type | Description |
|---|---|---|
| (highlighted) | HighlightResult | Stream that emits when code string is highlighted |
[nxtHighlightAuto]
| Input | Type | Default value | Description |
|---|---|---|---|
| [nxtHighlightAuto] | string | null | undefined | 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. |
| Output | Type | Description |
|---|---|---|
| (highlighted) | AutoHighlightResult | Stream that emits when code string is highlighted |
nxt-components