Merge pull request #74 from MurhafSousli/new

v3.0.2
MurhafSousli · Feb 12, 2019 · 49961b7 · 49961b7
2 parents a5248d2 + 7b48c77
commit 49961b7
Show file tree

Hide file tree

Showing 21 changed files with 1,447 additions and 12,812 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.2
+
+- fix(HighlightChildren): Highlight children not working inside `[innerHtml]`, closes [#67](https://github.com/MurhafSousli/ngx-highlightjs/issues/67) in [969f3b3](https://github.com/MurhafSousli/ngx-highlightjs/pull/73/commits/969f3b343f4a1015aa89dfca4625d64e4b1a28fd).
+
 ## 3.0.0
 
 ### Breaking Changes

diff --git a/README.md b/README.md
@@ -45,7 +45,9 @@ $ yarn add ngx-highlightjs highlight.js
 
 ## Usage
 
-### Import `HighlightModule` library from any module:
+### OPTION 1: Import `HighlightModule` in the root module
+
+ > Note: this will include the whole library in your main bundle
 
 ```ts
 import { HighlightModule } from 'ngx-highlightjs';
@@ -77,19 +79,97 @@ export function hljsLanguages() {
 export class AppModule { }
 ```
 
-`HighlightModule.forRoot(options)` Should be called at least once to register highlighting languages.
-
-`forRoot(options)` Accepts options parameter which have the following properties:
+`forRoot(options: HighlightOptions)` Accepts options parameter which have the following properties:
 
 - **languages**: The set of languages to register.
 - **config**: Configures global options, see [configure-options](http://highlightjs.readthedocs.io/en/latest/api.html#configure-options).
 
+### OPTION 2: Import `HighlightModule` in a feature module
+
+You probably don't want to load this library in the root module, you can lazy load it by importing it in your feature module, however Highlight.js languages has to be registered in the root module
+
+```ts
+import { HighlightModule } from 'ngx-highlightjs';
+
+import xml from 'highlight.js/lib/languages/xml';
+import scss from 'highlight.js/lib/languages/scss';
+import typescript from 'highlight.js/lib/languages/typescript';
+
+/**
+ * Import every language you wish to highlight here
+ * NOTE: The name of each language must match the file name its imported from
+ */
+export function hljsLanguages() {
+  return [
+    {name: 'typescript', func: typescript},
+    {name: 'scss', func: scss},
+    {name: 'xml', func: xml}
+  ];
+}
+
+@NgModule({
+  providers: [
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        languages: hljsLanguages,
+        config: { ... }            // <= Optional
+      }
+    }
+  ]
+})
+export class AppModule { }
+```
+
+After Highlight.js languages are registered, just import `HighlightModule` in the feature module
+
+```ts
+@NgModule({
+  imports: [
+    // ...
+    HighlightModule
+  ]
+})
+export class FeatureModule { }
+```
+
+
 ### Import highlighting theme
 
-```scss
+Import highlight.js theme from the node_modules directory in `angular.json`
+
+```
+"styles": [
+  "styles.css",
+  "../node_modules/highlight.js/styles/github.css",
+]
+```
+
+Or import it in `src/style.scss`
+
+```css
 @import '~highlight.js/styles/github.css';
 ```
 
+You can also lazy load the theme by importing it in your lazy loaded component stylesheet
+
+```ts
+import { Component, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'lazy-loaded',
+  templateUrl: './lazy-loaded.component.html',
+  styleUrls: [`
+    @import '~highlight.js/styles/github.css';
+  `],
+  encapsulation: ViewEncapsulation.None         // <= Add this
+})
+export class LazyLoadedComponent  {
+}
+```
+
+ > Note: if you have multiple components that use `HighlightModule`, then it is better to import the theme in the global styles `src/styles.css` 
+
 _[List of all available themes from highlight.js](https://github.com/isagalaev/highlight.js/tree/master/src/styles)_
 
 ## `highlight` directive

diff --git a/docs/3rdpartylicenses.txt b/docs/3rdpartylicenses.txt
diff --git a/docs/index.html b/docs/index.html
@@ -65,10 +65,10 @@
     }(document, "script", "twitter-wjs"));</script>
   <!-- Place this tag in your head or just before your close body tag. -->
   <script async defer src="https://buttons.github.io/buttons.js"></script>
-<link rel="stylesheet" href="styles.12717e50a19f685f450a.css"></head>
+<link rel="stylesheet" href="styles.f01817e5628f788515e4.css"></head>
 
 <body>
   <app-root></app-root>
-<script type="text/javascript" src="runtime.ec2944dd8b20ec099bf3.js"></script><script type="text/javascript" src="polyfills.4a1680e9bfa9b2241c7e.js"></script><script type="text/javascript" src="main.e1341674fc68dd0435b9.js"></script></body>
+<script type="text/javascript" src="runtime.a5dd35324ddfd942bef1.js"></script><script type="text/javascript" src="polyfills.a18acebc4f77a761d785.js"></script><script type="text/javascript" src="main.c23be076c6f16cb240cd.js"></script></body>
 
 </html>
diff --git a/docs/main.c23be076c6f16cb240cd.js b/docs/main.c23be076c6f16cb240cd.js
diff --git a/docs/main.e1341674fc68dd0435b9.js b/docs/main.e1341674fc68dd0435b9.js
diff --git a/docs/polyfills.4a1680e9bfa9b2241c7e.js b/docs/polyfills.4a1680e9bfa9b2241c7e.js
diff --git a/docs/polyfills.a18acebc4f77a761d785.js b/docs/polyfills.a18acebc4f77a761d785.js
diff --git a/docs/runtime.ec2944dd8b20ec099bf3.js → docs/runtime.a5dd35324ddfd942bef1.js b/docs/runtime.ec2944dd8b20ec099bf3.js → docs/runtime.a5dd35324ddfd942bef1.js
diff --git a/docs/styles.12717e50a19f685f450a.css b/docs/styles.12717e50a19f685f450a.css
diff --git a/docs/styles.f01817e5628f788515e4.css b/docs/styles.f01817e5628f788515e4.css