## Highlighter

[![Support](https://img.shields.io/badge/Patreon-white?style=for-the-badge)](https://www.patreon.com/qrsln)
[![npm](https://img.shields.io/npm/v/@qrsln/highlighter?style=for-the-badge)](https://www.npmjs.com/package/@qrsln/highlighter)
[![npm](https://img.shields.io/npm/dm/@qrsln/highlighter?style=for-the-badge)](https://npmcharts.com/compare/@qrsln/highlighter?minimal=true)

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

> For Angular

[![Demo](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/NgHighlighter/Overview)

#### 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

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

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

#### Usage

```html

<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>

```

```typescript
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
![](https://github.com/krsln/Showcase/raw/master/Docs/Images/Highlighter/Highlighter_Stackoverflow_Dark_2022-01-30.png "Stackoverflow Dark")  
![](https://github.com/krsln/Showcase/raw/master/Docs/Images/Highlighter/Highlighter_Stackoverflow_Light_2022-01-30.png "Stackoverflow Light")