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
`,
};

Screenshots