JSPM

  • Created
  • Published
  • Downloads 59395
  • Score
    100M100P100Q157025F

Package Exports

  • ngx-highlightjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-highlightjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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

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

More plugins