ngx-highlight-js

Angular for syntax highlighting with highlight.js


Demo

- Live Demo
- Stackblitz

Installation instructions

$3

``
npm install --save ngx-highlight-js
`

$3

Load the highlight.js and theme css in page.

`html


`

Usage

`typescript
import { Component } from '@angular/core';
import { HighlightJsDirective } from 'ngx-highlight-js';

@Component({
selector: 'test',
template: npm install --save ngx-highlight-js,
imports: [HighlightJsDirective]
})
export class SimpleComponent {}
`

$3

`html
<br />/<em> tslint:disable </em>/<br />import { Component } from '@angular/core';</p><p class="my-3">@Component({<br /> selector: 'demo',<br /> templateUrl: './demo.component.html',<br /> styleUrls: ['./demo.component.scss']<br />})<br />export class DemoComponent {<br /> switchStatus: boolean = true;<br />}<br />
`

$3

Will render each

:
`html
<br />  <p><br />    The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling<br />    <a href="http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload"><code>initHighlightingOnLoad</code></a<br />    >:<br />  </p><br />  <pre><code class="language-html"><link rel="stylesheet" href="/path/to/styles/default.css"><br />  <script src="/path/to/highlight.min.js"></script><br />  <script>hljs.initHighlightingOnLoad();</script><br />  </code></pre><br />  <p><br />    This will find and highlight code inside of <code><pre><code></code> tags; it tries to detect the language automatically. If<br />    automatic detection doesn’t work for you, you can specify the language in the <code>class</code> attribute:<br />  </p><br />  <pre><code class="language-html"><pre><code class="html">...</code></pre><br />  </code></pre><br />
`
$3
| Property    | Description                                                                                              | Type              | Default  | Global Config |
| ----------- | -------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ------------- |
| [mode]    | - default Will render each 

- simple Render all content according to lang language | default, simple | simple | ✅            |
| [options] | Equar configure(options)              | any             | -        | ✅            |
| [lang]    | Uses language detection by default but you can specify the language                                      | string          | html   | ✅            |
| [code]    | Specify content                                                                                          | string          | html   | -             |
Global Config
`ts
@NgModule({
  providers: [provideHighlightJsConfig({ lang: 'html' })]
})
export class AppDemoModule {}
``
Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
1. Use GitHub Issues board to report bugs and feature requests (not our email address)
2. Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
$3
The MIT License (see the LICENSE file for the full text)