Instant code highlighting, auto-detect language, super easy to use

• Live Demo | Stackblitz
• Installation
• Usage
• Development
• Issues
• Author
• More plugins

1. Install it with npm

$ npm install --save ngx-highlightjs

2. Head to highlight.js download page and get your custom package bundle including only the languages you need.

3. Create new folder in src/assets/lib/hljs and extract the downloaded zip file there.

Import HighlightModule library from any module:

import { HighlightModule } from 'ngx-highlightjs';

@NgModule({
  imports: [
    // ...
    HighlightModule.forRoot()
  ]
})
export class AppModule { }

The function forRoot accepts 1 optional parameters, forRoot(options?: HighlightOptions)

With options parameter you can set:

• theme: select the theme, use theme's name without the extension, default: 'github'
• path: hljs library location, default: 'assets/lib/hljs'
• auto: Enable observer mutation to auto-highlight on text changes, default: true
• config: Configures global options, see configure-options, default: null.

Choose highlighting theme:

HighlightModule.forRoot({ theme: 'agate'});

List of all available themes from highlight.js

Import highlight.js library from a custom path

const options: HighlightOptions = {
 theme: 'agate',
 path: 'assets/js/highlight-js'
};

HighlightModule.forRoot(options);

Now you can use the directive highlight, you can:

• Highlight a code element

<!-- Highlight directly -->
<pre><code highlight [code]="someCode"></code></pre>
<!-- Or -->
<pre><code highlight [textContent]="someCode"></code></pre>

Check this stackblitz

• Highlight all child code elements

<!-- Highlight child elements with 'pre code' selector -->
<div highlight="all">
  <pre><code [textContent]="htmlCode"></code></pre>
  <pre><code [textContent]="tsCode"></code></pre>
  <pre><code [textContent]="cssCode"></code></pre>
</div>

Check this stackblitz

• Highlight custom elements

<!-- Highlight child elements with custom selector -->
<div highlight="section code">
  <section><code [textContent]="pythonCode"></code></section>
  <section><code [textContent]="swiftCode"></code></section>
</div>

• [highlight]: (string), default null

  • Use just highlight without a value to highlight the element.
  • Use highlight="all" to highlight child elements with 'pre code' selector.
  • Use highlight="{selector}" to highlight child elements with custom selector.

• [code]: (string), code content, default null

• [language]: (string[]), an array of language names and aliases restricting auto detection to only these languages, default: null

• (highlighted): Stream that emits highlight result, you can use HighlightResult interface for the response

If you wish to use highlight.js functions, check the official API for thw usage.

Example:

import { HighlightJS } from 'ngx-highlightjs';

export class AppComponent implements OnInit {

  constructor(private hljs: HighlightJS) {
  }

  ngOnInit() {
    this.hljs.isReady.subscribe(() => {
      console.log(this.hljs.listLanguages());
    });
  }
}

This project uses Angular CLI 6 to build the package.

$ ng build ngx-highlightjs --prod

If you identify any errors in the library, or have an idea for an improvement, please open an issue.

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

• ngx-sharebuttons
• ng-gallery
• ngx-progressbar
• ngx-scrollbar
• ngx-bar-rating
• ngx-disqus
• ngx-wordpress
• ngx-highlightjs
• ng-teximate