Instant code highlighting, auto-detect language, super easy to use
Install with NPM
npm i ngx-highlightjsimport { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@NgModule({
imports: [
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
fullLibraryLoader: () => import('highlight.js'),
}
}
],
})
export class AppModule { }Note: This will add highlight.js library including all languages to your bundle.
To avoid import everything from highlight.js library, you should import each language you want to highlight manually.
import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
@NgModule({
imports: [
HighlightModule
],
providers: [
{
provide: HIGHLIGHT_OPTIONS,
useValue: {
coreLibraryLoader: () => import('highlight.js/lib/core'),
lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers
languages: {
typescript: () => import('highlight.js/lib/languages/typescript'),
css: () => import('highlight.js/lib/languages/css'),
xml: () => import('highlight.js/lib/languages/xml')
}
}
}
],
})
export class AppModule { }| Name | Description |
|---|---|
| fullLibraryLoader | A function that returns a promise that loads highlight.js full script |
| coreLibraryLoader | A function that returns a promise that loads highlight.js core script |
| lineNumbersLoader | A function that returns a promise that loads line-numbers script which adds line numbers to the highlight code |
| languages | The set of languages to register. |
| config | Set highlight.js config, see configure-options |
NOTE: Since the update of highlight.js@v10.x.x, should use
coreLibraryLoader: () => import('highlight.js/lib/core')instead ofcoreLibraryLoader: () => import('highlight.js/lib/highlight')
Import highlight.js theme from the node_modules directory in angular.json
"styles": [
"styles.css",
"../node_modules/highlight.js/styles/github.css",
]
Or import it in src/style.scss
@import '~highlight.js/styles/github.css';List of all available themes from highlight.js
The following line will highlight the given code and append it to the host element
<pre><code [highlight]="code"></code></pre>| Name | Type | Description |
|---|---|---|
| [highlight] | string | Accept code string to highlight, default null |
| [languages] | string[] | An array of language names and aliases restricting auto detection to only these languages, default: null |
| [lineNumbers] | boolean | A flag that indicates adding line numbers to highlighted code element |
| (highlighted) | HighlightResult | Stream that emits the result object when element is highlighted |
In Angular 10, when building your project, you might get a warning WARNING in ... CommonJS or AMD dependencies can cause optimization bailouts.
To avoid this warning, add the following in your angular.json
{
"projects": {
"project-name": {
"architect": {
"build": {
"options": {
"allowedCommonJsDependencies": [
"highlight.js"
]
}
}
}
}
}
}Read more about CommonJS dependencies configuration
In version >= 4, a new sub-package were added with the following features:
- Highlight gists using gists API
- Highlight code directly from URL
import { HighlightPlusModule } from 'ngx-highlightjs/plus';
@NgModule({
imports: [
HighlightPlusModule
]
})
export class AppModule {
}- Use
[gist]directive with the gist id to get the response through the output(gistLoaded). - Once
(gistLoaded)emits, you will get access to the gist response. - Use
gistContentpipe to extract the file content from gist response using gist file name.
Example:
<pre [gist]="gistId" (gistLoaded)="gist = $event">
<code [highlight]="gist | gistContent: 'main.js'"></code>
</pre>To loop over gist?.files, use keyvalue pipe to pass file name into gistContent pipe.
Example:
<ng-container [gist]="gistId" (gistLoaded)="gist = $event">
<pre *ngFor="let file of gist?.files | keyvalue">
<code [highlight]="gist | gistContent: file.key"></code>
</pre>
</ng-container>Use the pipe codeFromUrl with the async pipe together to get the code text from a raw URL.
Example:
<pre>
<code [highlight]="codeUrl | codeFromUrl | async"></code>
</pre>This project uses Angular CLI to build the package.
$ ng build ngx-highlightjsIf you identify any errors in the library, or have an idea for an improvement, please open an issue.
Murhaf Sousli