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