@qrsln/highlighter NPM

Highlighter

Supported Languages: typescript, html, css/scss/less, csharp, javascript, json, php, python, markdown

For Angular

Properties

Params	desc
Theme	highlight.js theme default: 'stackoverflow-dark'
Code	code here or innerHTML if code not set it will look innerHTML
LineNumbers	Line Numbers default: false
Lang	code language here necessary Default value: `html`
Options	highlight.js options

app.module.ts

import {HighlighterModule} from '@qrsln/highlighter';

@NgModule({
  imports: [HighlighterModule, /*...*/],
})

Usage

<div Highlighter [theme]="selectedTheme" [lang]="'typescript'"  [lineNumbers]="lineNumbers" [innerHtml]="CODES.Typescript"></div>

<textarea Highlighter [theme]="selectedTheme" [lang]="'csharp'" [lineNumbers]="lineNumbers" [code]="CODES.Typescript"></textarea>
<textarea Highlighter [theme]="selectedTheme" [lang]="'typescript'" [lineNumbers]="lineNumbers">
class MyClass {
  public static myValue: string;
  constructor(init: string) {
    this.myValue = init;
  }
}
import fs = require("fs");
module MyModule {
  export interface MyInterface extends Other {
    myProperty: any;
  }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax
</textarea>

selectedTheme = 'stackoverflow-dark';
lineNumbers = false;

CODES = {
  Typescript: `
class MyClass {
  public static myValue: string;
  constructor(init: string) {
    this.myValue = init;
  }
}
import fs = require("fs");
module MyModule {
  export interface MyInterface extends Other {
    myProperty: any;
  }
}
declare magicNumber number;
myArray.forEach(() => { }); // fat arrow syntax
`,
};