Angular component and service for Highlight.js. Works with remote URLs or strings/variables. Loads highlight.js core, languages and themes as needed.

Demo

Install the library and the @nowzoo/sheetload dependency with NPM...

npm i @nowzoo/ngx-highlight-js @nowzoo/sheetload --save

Import into AppModule with NgxHighlightJsModule.forRoot()...

import { NgxHighlightJsModule } from '@nowzoo/ngx-highlight-js'; // other imports... @NgModule({ imports: [ NgxHighlightJsModule.forRoot(), // other imports... ] }) export class MyModule { }

Add an NgxHighlightJsComponent. You can provide an absolute or relative URL with the url input...

<ngx-highlight-js lang="scss" url="https://raw.githubusercontent.com/twbs/bootstrap/v4.1.1/scss/_variables.scss"> </ngx-highlight-js>

Or use the code input to use a string or a variable...

<!-- string... --> <ngx-highlight-js lang="bash" code="npm i @nowzoo/ngx-highlight-js --save"></ngx-highlight-js> <!-- variable... --> <ngx-highlight-js lang="bash" [code]="myVar"></ngx-highlight-js>

static forRoot()

Change the default theme:

The default theme is loaded by default. To change this on an app-wide basis, provide an alternate value for NGX_HIGHLIGHT_JS_DEFAULT_THEME:

@NgModule({ providers: [ {provide: NGX_HIGHLIGHT_JS_DEFAULT_THEME, useValue: 'atelier-cave-dark'} ] }) export class AppModule { }

Change the CDN URL:

By default, Highlight.js assets are downloaded from //cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0. Change this with NGX_HIGHLIGHT_JS_DEFAULT_THEME:

@NgModule({ providers: [ {provide: NGX_HIGHLIGHT_JS_DEFAULT_THEME, useValue: '/path/to/highlight-js'} ] }) export class AppModule { }

Methods

loaded(): Promise<any>
Ensures highlight.js is loaded, then resolves with the global hljs instance.

loadLanguage(lang: string): Promise<void>
Resolves after ensuring the javascript to format the language has been loaded.

loadTheme(theme: string): Promise<void>
Resolves after the stylesheet for the theme has loaded. Use the basename of the theme, like 'dracula'. Only one theme can be loaded at a time.

highlight(lang: string, code: string): Promise<string>
Highlights code with lang.

Properties

theme: string
The currently loaded theme.

selector: ngx-highlight-js | exportAs: ngxHighlightJs

Inputs

code: string
A string containing the code you want to highlight.

url: string
A URL with the code you want to highlight.

lang: string
Required. The language.

Properties

isInitializing: boolean True when highlighting (or re-highlighting) the code.

error: string Set if highlighting fails.

Contributions are welcome.

git clone https://github.com/nowzoo/ngx-highlight-js.git npm i ng build ngx-highlight-js --prod

The library code is located under projects/ngx-highlight-js.

Testing the library...

ng test ngx-highlight-js

You can also use Wallaby for testing. Use the config found at projects/ngx-highlight-js/wallaby.js.

Building the library...

ng build ngx-highlight-js --prod

The demo code is in src. Run the demo locally...

# Build the current version of the library first... ng build ngx-highlight-js --prod ng serve --open

MIT