ngx-highlightjs

Angular Highlight.js

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

---

Table of Contents

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

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.

2. 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 target element -->
<pre><code highlight [code]="someCode"></code></pre>
<!-- Or -->
<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]: 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.

• [code]: string, default null

• (highlighted): Stream that emits highlight result

Development

This project uses ng-packagr for development.

Use the following command to build

$ npm run packagr

Issues

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

Author

Murhaf Sousli

• github/murhafsousli
• twitter/murhafsousli

More plugins

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