@qrsln/highlighter
Version:
Based on highlighter.js
86 lines (68 loc) • 2.91 kB
Markdown
## Highlighter
[](https://www.patreon.com/qrsln)
[](https://www.npmjs.com/package/@qrsln/highlighter)
[](https://npmcharts.com/compare/@qrsln/highlighter?minimal=true)
Supported Languages: typescript, html, css/scss/less, csharp, javascript, json, php, python, markdown
> For Angular
[](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
