JSPM

  • Created
  • Published
  • Downloads 59395
  • Score
    100M100P100Q156999F
  • License MIT

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

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 npm Build Status npm npm npm bundle size (minified + gzip) npm

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


Table of Contents

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

More plugins