changhuixu / ngx-highlightjs

Angular syntax highlighting module

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

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

• 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