Angular Highlight.js

Super easy to use, auto highlight code and auto-detect language

Installation

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.

SystemJS

If you are using SystemJS, you should also adjust your configuration to point to the UMD bundle.

In your systemjs config file, map needs to tell the System loader where to look for ngx-highlightjs:

map: {
  'ngx-highlightjs': 'node_modules/ngx-highlightjs/bundles/ngx-highlightjs.umd.js',
}

Import HighlightUmdModule, you will need to import highlight.js script and style manually, Here is a working plunker.

Usage

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: auto-highlight on code text changes, default: true

Choose highlighting theme:

    HighlightModule.forRoot({ theme: 'monokai-sublime'});

List of all available themes from highlight.js

Import the library from a custom path and disable auto highlight on changes

   const options: HighlightOptions = {
     theme: 'monokai-sublime',
     path: 'assets/js/highlight-js',
     auto: false
   };

   HighlightModule.forRoot(options);

Now you can use the directive highlight, you can:

• Highlight a code element

<!-- Highlight target element -->
<pre><code highlight [textContent]="someCode"></code></pre>

• Highlight all child code elements

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

• Highlight custom elements

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

Options

• Highlight element(s)

  [highlight]: string, default ''

  • Use just highlight on the element to highlight it.
  • Use highlight="all" to highlight all child code elements.
  • Use highlight="{selector}" to highlight custom child elements.

• Auto-highlight on changes (for systemjs users)

  [hlAuto]: boolean, default true;

• Highlight delay (for systemjs users)

  [hlDelay]: number, default 200 ms;

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

Issues

If you identify any errors in the library, or have an idea for an improvement, please open an issue. I am excited to see what the community thinks of this project, and I would love your input!

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli