Skip to content

Commit c1d297c

Browse files
cipchkcipchk
committed
release: 20
1 parent b6225b2 commit c1d297c

File tree

3 files changed

+118
-118
lines changed

3 files changed

+118
-118
lines changed

‎README.md‎

Lines changed: 116 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1,116 @@
1-
# ngx-highlight-js
2-
3-
Angular for syntax highlighting with highlight.js
4-
5-
[![NPM version](https://img.shields.io/npm/v/ngx-highlight-js.svg)](https://www.npmjs.com/package/ngx-highlight-js)
6-
[![Ci](https://github.com/cipchk/ngx-highlight-js/workflows/Ci/badge.svg)](https://github.com/cipchk/ngx-highlight-js/actions)
7-
[![codecov](https://codecov.io/github/cipchk/ngx-highlight-js/graph/badge.svg?token=FI8lMVH3bN)](https://codecov.io/github/cipchk/ngx-highlight-js)
8-
9-
## Demo
10-
11-
- [Live Demo](https://cipchk.github.io/ngx-highlight-js/)
12-
- [Stackblitz](https://stackblitz.com/edit/ngx-highlight-js)
13-
14-
## Installation instructions
15-
16-
### 1、Install
17-
18-
```
19-
npm install --save ngx-highlight-js
20-
```
21-
22-
### 2、Add highlight.js
23-
24-
Load the [highlight.js](https://highlightjs.org/download/) and theme css in page.
25-
26-
```html
27-
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.min.css" />
28-
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
29-
```
30-
31-
## Usage
32-
33-
```typescript
34-
import { Component } from '@angular/core';
35-
import { HighlightJsDirective } from 'ngx-highlight-js';
36-
37-
@Component({
38-
selector: 'test',
39-
template: `<textarea highlight-js [lang]="'bash'">npm install --save ngx-highlight-js</textarea>`,
40-
imports: [HighlightJsDirective],
41-
})
42-
export class SimpleComponent {}
43-
```
44-
45-
### Simple mode
46-
47-
```html
48-
<textarea highlight-js [options]="{}" [lang]="'typescript'">
49-
/* tslint:disable */
50-
import { Component } from '@angular/core';
51-
52-
@Component({
53-
selector: 'demo',
54-
templateUrl: './demo.component.html',
55-
styleUrls: ['./demo.component.scss']
56-
})
57-
export class DemoComponent {
58-
switchStatus: boolean = true;
59-
}
60-
</textarea>
61-
```
62-
63-
### Default mode
64-
65-
Will render each `<pre><code>`:
66-
67-
```html
68-
<textarea highlight-js mode="default">
69-
<p>
70-
The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling
71-
<a href="http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload"><code>initHighlightingOnLoad</code></a
72-
>:
73-
</p>
74-
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/styles/default.css&quot;&gt;
75-
&lt;script src=&quot;/path/to/highlight.min.js&quot;&gt;&lt;/script&gt;
76-
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
77-
</code></pre>
78-
<p>
79-
This will find and highlight code inside of <code>&lt;pre&gt;&lt;code&gt;</code> tags; it tries to detect the language automatically. If
80-
automatic detection doesn’t work for you, you can specify the language in the <code>class</code> attribute:
81-
</p>
82-
<pre><code class="language-html">&lt;pre&gt;&lt;code class=&quot;html&quot;&gt;...&lt;/code&gt;&lt;/pre&gt;
83-
</code></pre>
84-
</textarea>
85-
```
86-
87-
### Parameter
88-
89-
| Property | Description | Type | Default | Global Config |
90-
| ----------- | -------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ------------- |
91-
| `[mode]` | - `default` Will render each `<pre><code>`<br>- `simple` Render all content according to `lang` language | `default, simple` | `simple` | ✅ |
92-
| `[options]` | Equar [configure(options)](https://highlightjs.readthedocs.io/en/latest/api.html#configure) | `any` | - | ✅ |
93-
| `[lang]` | Uses language detection by default but you can specify the language | `string` | `html` | ✅ |
94-
| `[code]` | Specify content | `string` | `html` | - |
95-
96-
**Global Config**
97-
98-
```ts
99-
@NgModule({
100-
providers: [provideSFConfig({ lang: 'html' })],
101-
})
102-
export class AppDemoModule {}
103-
```
104-
105-
## Troubleshooting
106-
107-
Please follow this guidelines when reporting bugs and feature requests:
108-
109-
1. Use [GitHub Issues](https://github.com/cipchk/ngx-highlight-js/issues) board to report bugs and feature requests (not our email address)
110-
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.
111-
112-
Thanks for understanding!
113-
114-
### License
115-
116-
The MIT License (see the [LICENSE](https://github.com/cipchk/ngx-highlight-js/blob/master/LICENSE) file for the full text)
1+
# ngx-highlight-js
2+
3+
Angular for syntax highlighting with highlight.js
4+
5+
[![NPM version](https://img.shields.io/npm/v/ngx-highlight-js.svg)](https://www.npmjs.com/package/ngx-highlight-js)
6+
[![Ci](https://github.com/cipchk/ngx-highlight-js/workflows/Ci/badge.svg)](https://github.com/cipchk/ngx-highlight-js/actions)
7+
[![codecov](https://codecov.io/github/cipchk/ngx-highlight-js/graph/badge.svg?token=FI8lMVH3bN)](https://codecov.io/github/cipchk/ngx-highlight-js)
8+
9+
## Demo
10+
11+
- [Live Demo](https://cipchk.github.io/ngx-highlight-js/)
12+
- [Stackblitz](https://stackblitz.com/edit/ngx-highlight-js)
13+
14+
## Installation instructions
15+
16+
### 1、Install
17+
18+
```
19+
npm install --save ngx-highlight-js
20+
```
21+
22+
### 2、Add highlight.js
23+
24+
Load the [highlight.js](https://highlightjs.org/download/) and theme css in page.
25+
26+
```html
27+
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/atom-one-dark.min.css" />
28+
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>
29+
```
30+
31+
## Usage
32+
33+
```typescript
34+
import { Component } from '@angular/core';
35+
import { HighlightJsDirective } from 'ngx-highlight-js';
36+
37+
@Component({
38+
selector: 'test',
39+
template: `<textarea highlight-js [lang]="'bash'">npm install --save ngx-highlight-js</textarea>`,
40+
imports: [HighlightJsDirective]
41+
})
42+
export class SimpleComponent {}
43+
```
44+
45+
### Simple mode
46+
47+
```html
48+
<textarea highlight-js [options]="{}" [lang]="'typescript'">
49+
/* tslint:disable */
50+
import { Component } from '@angular/core';
51+
52+
@Component({
53+
selector: 'demo',
54+
templateUrl: './demo.component.html',
55+
styleUrls: ['./demo.component.scss']
56+
})
57+
export class DemoComponent {
58+
switchStatus: boolean = true;
59+
}
60+
</textarea>
61+
```
62+
63+
### Default mode
64+
65+
Will render each `<pre><code>`:
66+
67+
```html
68+
<textarea highlight-js mode="default">
69+
<p>
70+
The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling
71+
<a href="http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload"><code>initHighlightingOnLoad</code></a
72+
>:
73+
</p>
74+
<pre><code class="language-html">&lt;link rel=&quot;stylesheet&quot; href=&quot;/path/to/styles/default.css&quot;&gt;
75+
&lt;script src=&quot;/path/to/highlight.min.js&quot;&gt;&lt;/script&gt;
76+
&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;
77+
</code></pre>
78+
<p>
79+
This will find and highlight code inside of <code>&lt;pre&gt;&lt;code&gt;</code> tags; it tries to detect the language automatically. If
80+
automatic detection doesn’t work for you, you can specify the language in the <code>class</code> attribute:
81+
</p>
82+
<pre><code class="language-html">&lt;pre&gt;&lt;code class=&quot;html&quot;&gt;...&lt;/code&gt;&lt;/pre&gt;
83+
</code></pre>
84+
</textarea>
85+
```
86+
87+
### Parameter
88+
89+
| Property | Description | Type | Default | Global Config |
90+
| ----------- | -------------------------------------------------------------------------------------------------------- | ----------------- | -------- | ------------- |
91+
| `[mode]` | - `default` Will render each `<pre><code>`<br>- `simple` Render all content according to `lang` language | `default, simple` | `simple` | ✅ |
92+
| `[options]` | Equar [configure(options)](https://highlightjs.readthedocs.io/en/latest/api.html#configure) | `any` | - | ✅ |
93+
| `[lang]` | Uses language detection by default but you can specify the language | `string` | `html` | ✅ |
94+
| `[code]` | Specify content | `string` | `html` | - |
95+
96+
**Global Config**
97+
98+
```ts
99+
@NgModule({
100+
providers: [provideHighlightJsConfig({ lang: 'html' })]
101+
})
102+
export class AppDemoModule {}
103+
```
104+
105+
## Troubleshooting
106+
107+
Please follow this guidelines when reporting bugs and feature requests:
108+
109+
1. Use [GitHub Issues](https://github.com/cipchk/ngx-highlight-js/issues) board to report bugs and feature requests (not our email address)
110+
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.
111+
112+
Thanks for understanding!
113+
114+
### License
115+
116+
The MIT License (see the [LICENSE](https://github.com/cipchk/ngx-highlight-js/blob/master/LICENSE) file for the full text)

‎lib/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-highlight-js",
3-
"version": "19.0.0",
3+
"version": "20.0.0",
44
"description": "Angular for syntax highlighting with highlight.js",
55
"keywords": [
66
"highlight",

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-highlight-js",
3-
"version": "19.0.0",
3+
"version": "20.0.0",
44
"description": "Angular for syntax highlighting with highlight.js",
55
"keywords": [
66
"highlight",

0 commit comments

Comments
 (0)