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

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

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

Import `HighlightModule` library from any 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({
  imports: [
    // ...
    HighlightModule.forRoot({
      languages: hljsLanguages
    })
  ]
})
export class AppModule { }

HighlightModule.forRoot(options) Should be called at least once to register highlighting languages.

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

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

Import highlighting theme

@import '~highlight.js/styles/github.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
[language]: (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

ngx-highlightjs