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: 8 months 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 8 years ago)
- Default Branch: master
- Last Pushed: 2024-11-23T14:49:56.000Z (about 1 year ago)
- Last Synced: 2025-04-02T08:11:22.614Z (9 months 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: 30
- Watchers: 4
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-highlight-js - Angular wrapper around [highlight.js](https://highlightjs.org/) for syntax highlighting. (Framework Interoperability / Wrappers)
- 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
[](https://www.npmjs.com/package/ngx-highlight-js)
[](https://github.com/cipchk/ngx-highlight-js/actions)
[](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)