https://github.com/cipchk/ngx-highlight-js

Angular for syntax highlighting with highlight.js
https://github.com/cipchk/ngx-highlight-js

angular angular5 highlight highlight-js ngx-highlight-js

Last synced: 5 days ago
JSON representation

Angular for syntax highlighting with highlight.js

• Host: GitHub
• URL: https://github.com/cipchk/ngx-highlight-js
• Owner: cipchk
• License: mit
• Created: 2017-04-22T07:22:04.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-11-23T14:49:56.000Z (about 2 months ago)
• Last Synced: 2024-12-27T06:08:18.505Z (12 days ago)
• Topics: angular, angular5, highlight, highlight-js, ngx-highlight-js
• Language: HTML
• Homepage: https://cipchk.github.io/ngx-highlight-js/
• Size: 3.41 MB
• Stars: 28
• Watchers: 5
• Forks: 4
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - cipchk/ngx-highlight-js - Angular for syntax highlighting with highlight.js (HTML)

README

        
# ngx-highlight-js

Angular for syntax highlighting with highlight.js

[![NPM version](https://img.shields.io/npm/v/ngx-highlight-js.svg)](https://www.npmjs.com/package/ngx-highlight-js)

[![Ci](https://github.com/cipchk/ngx-highlight-js/workflows/Ci/badge.svg)](https://github.com/cipchk/ngx-highlight-js/actions)

[![codecov](https://codecov.io/github/cipchk/ngx-highlight-js/graph/badge.svg?token=FI8lMVH3bN)](https://codecov.io/github/cipchk/ngx-highlight-js)

## Demo

- [Live Demo](https://cipchk.github.io/ngx-highlight-js/)

- [Stackblitz](https://stackblitz.com/edit/ngx-highlight-js)

## Installation instructions

### 1、Install

```

npm install --save ngx-highlight-js

```

### 2、Add highlight.js

Load the [highlight.js](https://highlightjs.org/download/) 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 {}

```

### Simple mode

```html

/* tslint:disable */

import { Component } from '@angular/core';

@Component({

  selector: 'demo',

  templateUrl: './demo.component.html',

  styleUrls: ['./demo.component.scss']

})

export class DemoComponent {

  switchStatus: boolean = true;

}

```

### Default mode

Will render each `
`:


```html

  


    The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling

    initHighlightingOnLoad:

  

  
<link rel="stylesheet" href="/path/to/styles/default.css">

  <script src="/path/to/highlight.min.js"></script>

  <script>hljs.initHighlightingOnLoad();</script>

  

  


    This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If

    automatic detection doesn’t work for you, you can specify the language in the class attribute:

  

  
<pre><code class="html">...</code></pre>

  


```

### Parameter

| 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)](https://highlightjs.readthedocs.io/en/latest/api.html#configure)              | `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: [provideSFConfig({ lang: 'html' })],

})

export class AppDemoModule {}

```

## Troubleshooting

Please follow this guidelines when reporting bugs and feature requests:

1. Use [GitHub Issues](https://github.com/cipchk/ngx-highlight-js/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!

### License

The MIT License (see the [LICENSE](https://github.com/cipchk/ngx-highlight-js/blob/master/LICENSE) file for the full text)