Update README

MurhafSousli · Apr 1, 2024 · 1761a5b · 1761a5b
1 parent f17271e
commit 1761a5b
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,10 @@ ___
 - [Live Demo](https://ngx-highlight.netlify.com/) | [Stackblitz](https://stackblitz.com/edit/ngx-highlightjs)
 - [Installation](#installation)
 - [Usage](#usage)
+  - [Lazy-load highlight.js script](#usage)
+  - [Import highlight.js theme](#themes)
+  - [Highlight usage](#highlight)
+  - [HighlightAuto usage](#highlight-auto)
 - [Line numbers addon usage](#line-numbers)
 - [Plus package](#plus)
 - [Issues](#issues)
@@ -92,6 +96,8 @@ export const appConfig: ApplicationConfig = {
 | lineNumbersOptions | Set line numbers plugin options                                                                                                |
 | themePath          | The path to the CSS file for the highlighting theme                                                                            |
 
+<a name="themes"/>
+
 ### Import highlighting theme
 
 **Dynamic Approach**
@@ -141,12 +147,14 @@ In `angular.json`:
 Or directly in `src/style.scss`:
 
 ```css
-@import '~highlight.js/styles/github.css';
+@import 'highlight.js/styles/github.css';
 ```
 
 _[List of all available themes from highlight.js](https://github.com/isagalaev/highlight.js/tree/master/src/styles)_
 
-### Use highlight directive
+<a name="highlight"/>
+
+### Highlight Directive Usage
 
 To apply code highlighting, use the `highlight` directive. It requires setting the target language, with an optional feature to ignore illegal syntax.
 
@@ -165,7 +173,7 @@ export class AppComponent {
 }
 ```
 
-## Options
+#### Options
 
 | Name                 | Type            | Description                                                                                                                                                    |
 |----------------------|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -174,26 +182,29 @@ export class AppComponent {
 | **[ignoreIllegals]** | boolean         | An optional parameter that when true forces highlighting to finish even in case of detecting illegal syntax for the language instead of throwing an exception. |
 | **(highlighted)**    | HighlightResult | Stream that emits the result object when element is highlighted                                                                                                |
 
-### `highlightAuto` directive
+
+<a name="highlight-auto"/>
+
+### HighlightAuto Directive Usage
 
 The `highlightAuto` directive works the same way but automatically detects the language to apply highlighting.
 
 ```ts
 import { HighlightAuto } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <pre><code [highlightAuto]="code"></code></pre>
   `,
-  standalone: true,
   imports: [HighlightAuto]
 })
 export class AppComponent {
 }
 ```
 
-## Options
+#### Options
 
 | Name                | Type                | Description                                                                                                |
 |---------------------|---------------------|------------------------------------------------------------------------------------------------------------|
@@ -204,9 +215,7 @@ export class AppComponent {
 
 <a name="line-numbers"/>
 
-## Line Numbers
-
-### `lineNumbers` directive
+## Line Numbers Directive Usage
 
 The `lineNumbers` directive extends highlighted code with line numbers. It functions in conjunction with the `highlight` and `highlightAuto` directives.
 
@@ -215,18 +224,18 @@ import { HighlightAuto } from 'ngx-highlightjs';
 import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <pre><code [highlightAuto]="code" lineNumbers></code></pre>
   `,
-  standalone: true,
   imports: [HighlightAuto, HighlightLineNumbers]
 })
 export class AppComponent {
 }
 ```
 
-## Options
+#### Options
 
 | Name             | Type    | Description                                                  |
 |------------------|---------|--------------------------------------------------------------|
@@ -295,13 +304,13 @@ export const appConfig: ApplicationConfig = {
 import { HighlightPlusModule } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <pre [gist]="gistId" (gistLoaded)="gist = $event">
       <code [highlight]="gist | gistContent: 'main.js'"></code>
     </pre>
   `,
-  standalone: true,
   imports: [HighlightPlusModule]
 })
 export class AppComponent {
@@ -320,6 +329,7 @@ To highlight all files within a gist, iterate through `gist.files` and utilize t
 import { HighlightPlusModule } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <ng-container [gist]="gistId" (gistLoaded)="gist = $event">
@@ -328,7 +338,6 @@ import { HighlightPlusModule } from 'ngx-highlightjs';
       }
     </ng-container>
   `,
-  standalone: true,
   imports: [HighlightPlusModule, CommonModule]
 })
 export class AppComponent {
@@ -345,13 +354,13 @@ Use the pipe `codeFromUrl` with the `async` pipe to get the code text from a raw
 import { HighlightPlusModule } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
    <pre>
      <code [highlight]="codeUrl | codeFromUrl | async"></code>
    </pre>
   `,
-  standalone: true,
   imports: [HighlightPlusModule, CommonModule]
 })
 export class AppComponent {

diff --git a/README_V10.md b/README_V10.md
@@ -1,10 +1,10 @@
 <p align="center">
   <img height="200px" width="200px" style="text-align: center" src="https://cdn.rawgit.com/MurhafSousli/ngx-highlightjs/b8b00ec3/src/assets/logo.svg">
-  <h1 align="center">Angular Highlight.js</h1>
+  <h1 align="center">Angular Highlight.js v10</h1>
 </p>
 
 [![Demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://ngx-highlight.netlify.com/)
-[![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-highlightjs)
+[![Stackblitz](https://img.shields.io/badge/stackblitz-online-orange.svg)](https://stackblitz.com/edit/ngx-highlightjs-v10)
 [![npm](https://img.shields.io/npm/v/ngx-highlightjs.svg?maxAge=2592000?style=plastic)](https://www.npmjs.com/package/ngx-highlightjs)
 [![tests](https://github.com/MurhafSousli/ngx-highlightjs/workflows/tests/badge.svg)](https://github.com/MurhafSousli/ngx-highlightjs/actions?query=workflow%3Atests)
 [![codecov](https://codecov.io/gh/MurhafSousli/ngx-highlightjs/graph/badge.svg?token=JWAelEiLT1)](https://codecov.io/gh/MurhafSousli/ngx-highlightjs)
@@ -16,9 +16,11 @@
 Instant code highlighting directives
 ___
 
+> This is the documentation for v10. For latest version, go to [README.md](/README.md).
+
 ## Table of Contents
 
-- [Live Demo](https://ngx-highlight.netlify.com/) | [Stackblitz](https://stackblitz.com/edit/ngx-highlightjs)
+- [Live Demo](https://ngx-highlight.netlify.com/) | [Stackblitz for v10](https://stackblitz.com/edit/ngx-highlightjs-v10)
 - [Installation](#installation)
 - [Usage](#usage)
 - [Development](#development)
@@ -33,7 +35,7 @@ ___
 Install with **NPM**
 
 ```bash
-npm i ngx-highlightjs
+npm i ngx-highlightjs@10
 ```
 
 <a name="usage"/>
@@ -185,7 +187,7 @@ export class AppComponent {
 }
 ```
 
-[Demo stackblitz](https://stackblitz.com/edit/ngx-highlightjs)
+[Demo stackblitz for v10](https://stackblitz.com/edit/ngx-highlightjs-v10)
 
 ## Options
 

diff --git a/projects/ngx-highlightjs/README.md b/projects/ngx-highlightjs/README.md
@@ -21,6 +21,10 @@ ___
 - [Live Demo](https://ngx-highlight.netlify.com/) | [Stackblitz](https://stackblitz.com/edit/ngx-highlightjs)
 - [Installation](#installation)
 - [Usage](#usage)
+  - [Lazy-load highlight.js script](#usage)
+  - [Import highlight.js theme](#themes)
+  - [Highlight usage](#highlight)
+  - [HighlightAuto usage](#highlight-auto)
 - [Line numbers addon usage](#line-numbers)
 - [Plus package](#plus)
 - [Issues](#issues)
@@ -92,6 +96,8 @@ export const appConfig: ApplicationConfig = {
 | lineNumbersOptions | Set line numbers plugin options                                                                                                |
 | themePath          | The path to the CSS file for the highlighting theme                                                                            |
 
+<a name="themes"/>
+
 ### Import highlighting theme
 
 **Dynamic Approach**
@@ -141,12 +147,14 @@ In `angular.json`:
 Or directly in `src/style.scss`:
 
 ```css
-@import '~highlight.js/styles/github.css';
+@import 'highlight.js/styles/github.css';
 ```
 
 _[List of all available themes from highlight.js](https://github.com/isagalaev/highlight.js/tree/master/src/styles)_
 
-### Use highlight directive
+<a name="highlight"/>
+
+### Highlight Directive Usage
 
 To apply code highlighting, use the `highlight` directive. It requires setting the target language, with an optional feature to ignore illegal syntax.
 
@@ -165,7 +173,7 @@ export class AppComponent {
 }
 ```
 
-## Options
+#### Options
 
 | Name                 | Type            | Description                                                                                                                                                    |
 |----------------------|-----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------|
@@ -174,26 +182,29 @@ export class AppComponent {
 | **[ignoreIllegals]** | boolean         | An optional parameter that when true forces highlighting to finish even in case of detecting illegal syntax for the language instead of throwing an exception. |
 | **(highlighted)**    | HighlightResult | Stream that emits the result object when element is highlighted                                                                                                |
 
-### `highlightAuto` directive
+
+<a name="highlight-auto"/>
+
+### HighlightAuto Directive Usage
 
 The `highlightAuto` directive works the same way but automatically detects the language to apply highlighting.
 
 ```ts
 import { HighlightAuto } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <pre><code [highlightAuto]="code"></code></pre>
   `,
-  standalone: true,
   imports: [HighlightAuto]
 })
 export class AppComponent {
 }
 ```
 
-## Options
+#### Options
 
 | Name                | Type                | Description                                                                                                |
 |---------------------|---------------------|------------------------------------------------------------------------------------------------------------|
@@ -204,9 +215,7 @@ export class AppComponent {
 
 <a name="line-numbers"/>
 
-## Line Numbers
-
-### `lineNumbers` directive
+## Line Numbers Directive Usage
 
 The `lineNumbers` directive extends highlighted code with line numbers. It functions in conjunction with the `highlight` and `highlightAuto` directives.
 
@@ -215,18 +224,18 @@ import { HighlightAuto } from 'ngx-highlightjs';
 import { HighlightLineNumbers } from 'ngx-highlightjs/line-numbers';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <pre><code [highlightAuto]="code" lineNumbers></code></pre>
   `,
-  standalone: true,
   imports: [HighlightAuto, HighlightLineNumbers]
 })
 export class AppComponent {
 }
 ```
 
-## Options
+#### Options
 
 | Name             | Type    | Description                                                  |
 |------------------|---------|--------------------------------------------------------------|
@@ -295,13 +304,13 @@ export const appConfig: ApplicationConfig = {
 import { HighlightPlusModule } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <pre [gist]="gistId" (gistLoaded)="gist = $event">
       <code [highlight]="gist | gistContent: 'main.js'"></code>
     </pre>
   `,
-  standalone: true,
   imports: [HighlightPlusModule]
 })
 export class AppComponent {
@@ -320,6 +329,7 @@ To highlight all files within a gist, iterate through `gist.files` and utilize t
 import { HighlightPlusModule } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
     <ng-container [gist]="gistId" (gistLoaded)="gist = $event">
@@ -328,7 +338,6 @@ import { HighlightPlusModule } from 'ngx-highlightjs';
       }
     </ng-container>
   `,
-  standalone: true,
   imports: [HighlightPlusModule, CommonModule]
 })
 export class AppComponent {
@@ -345,13 +354,13 @@ Use the pipe `codeFromUrl` with the `async` pipe to get the code text from a raw
 import { HighlightPlusModule } from 'ngx-highlightjs';
 
 @Component({
+  standalone: true,
   selector: 'app-root',
   template: `
    <pre>
      <code [highlight]="codeUrl | codeFromUrl | async"></code>
    </pre>
   `,
-  standalone: true,
   imports: [HighlightPlusModule, CommonModule]
 })
 export class AppComponent {