ngx-highlightjs

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

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

Choose highlighting theme:

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

List of all available themes from highlight.js

Import highlight.js library from a custom path

   const options: HighlightOptions = {
     theme: 'monokai-sublime',
     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 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.

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

Changelog

1.2.0

• Remove HighlightUmdModule and systemjs support
• Refactir(HighlightModule)
• Add [code] input