Angular Highlight.js

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

Table of Contents

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

Installation

NPM

$ npm install -S ngx-highlightjs highlight.js

YARN

$ yarn add ngx-highlightjs highlight.js

Usage

OPTION 1: Import HighlightModule in the root module

Note: this will include the whole library in your main bundle

import { HighlightModule } from 'ngx-highlightjs';

import xml from 'highlight.js/lib/languages/xml';
import scss from 'highlight.js/lib/languages/scss';
import typescript from 'highlight.js/lib/languages/typescript';

/**
 * Import every language you wish to highlight here
 * NOTE: The name of each language must match the file name its imported from
 */
export function hljsLanguages() {
  return [
    {name: 'typescript', func: typescript},
    {name: 'scss', func: scss},
    {name: 'xml', func: xml}
  ];
}

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

forRoot(options: HighlightOptions) Accepts options parameter which have the following properties:

• languages: The set of languages to register.
• config: Configures global options, see configure-options.

OPTION 2: Import HighlightModule in a feature module

You probably don't want to load this library in the root module, you can lazy load it by importing it in your feature module, however Highlight.js languages has to be registered in the root module

import { HighlightModule } from 'ngx-highlightjs';

import xml from 'highlight.js/lib/languages/xml';
import scss from 'highlight.js/lib/languages/scss';
import typescript from 'highlight.js/lib/languages/typescript';

/**
 * Import every language you wish to highlight here
 * NOTE: The name of each language must match the file name its imported from
 */
export function hljsLanguages() {
  return [
    {name: 'typescript', func: typescript},
    {name: 'scss', func: scss},
    {name: 'xml', func: xml}
  ];
}

@NgModule({
  providers: [
    {
      provide: HIGHLIGHT_OPTIONS,
      useValue: {
        languages: hljsLanguages,
        config: { ... }            // <= Optional
      }
    }
  ]
})
export class AppModule { }

After Highlight.js languages are registered, just import HighlightModule in the feature module

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

Import highlighting theme

Import highlight.js theme from the node_modules directory in angular.json

"styles": [
  "styles.css",
  "../node_modules/highlight.js/styles/github.css",
]

Or import it in src/style.scss

@import '~highlight.js/styles/github.css';

You can also lazy load the theme by importing it in your lazy loaded component stylesheet

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'lazy-loaded',
  templateUrl: './lazy-loaded.component.html',
  styleUrls: [`
    @import '~highlight.js/styles/github.css';
  `],
  encapsulation: ViewEncapsulation.None         // <= Add this
})
export class LazyLoadedComponent  {
}

Note: if you have multiple components that use HighlightModule, then it is better to import the theme in the global styles src/styles.css

List of all available themes from highlight.js

highlight directive

Highlight host element

<pre><code [highlight]="someCode"></code></pre>

Check this stackblitz

Options

• [highlight]: (string), Accept code string to highlight, default null

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

• (highlighted): Stream that emits HighlightResult object when element is highlighted.

highlightChildren directive

Highlight children code elements

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

Check this stackblitz

• Highlight children custom elements by selector

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

HighlightJS service

Use this service if you wish to access the Official HighlightJS API.

Development

This project uses Angular CLI 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

• github/murhafsousli
• twitter/murhafsousli

More plugins

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