@qrsln/highlighter

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