/ngx-highlightjs

Angular syntax highlighting module

Primary LanguageCSSMIT LicenseMIT

Angular Highlight.js

npm npm Build Status npm

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

Table of Contents

Installation

  1. Install it with npm
$ npm install --save ngx-highlightjs
  1. Head to highlight.js download page and get your custom package bundle including only the languages you need.

If you want to use HighlightJs from a CDN, then skip step 2 and 3, and just add the script in the document head.

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

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

Options

  • [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

Use highlight.js functions (version >= 2.1.0)

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());
    });
  }
}

Development

This project uses Angular CLI 6 to build the package.

$ ng build ngx-highlightjs --prod

Issues

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

Author

Murhaf Sousli

More plugins