Replace angular2-hightlight.js with ngx-highlightjs

angular.json

@@ -29,7 +29,6 @@
               }
             ],
             "styles": [
-              "node_modules/highlight.js/styles/solarized-light.css",
               "node_modules/ontimize-web-ngx/ontimize.scss",
               "node_modules/ontimize-web-ngx-charts/styles.scss",
               "src/styles.scss"

package.json

@@ -30,13 +30,13 @@
     "@angular/router": "~8.2.14",
     "@angular/service-worker": "~8.2.14",
     "@angular/upgrade": "~8.2.14",
-    "angular2-highlight-js": "^8.0.1",
+    "ngx-highlightjs": "4.0.2",
     "hammerjs": "^2.0.8",
     "highlight.js": "^9.5.0",
     "node-sass": "^4.14.1",
     "ontimize-web-ngx": "8.11.0-SNAPSHOT-1",
-    "ontimize-web-ngx-charts": "^8.1.0",
-    "ontimize-web-ngx-gallery": "8.1.0",
+    "ontimize-web-ngx-charts": "8.1.1",
+    "ontimize-web-ngx-gallery": "8.1.2",
     "ontimize-web-ngx-theming": "8.5.0-SNAPSHOT-1",
     "rxjs": "~6.4.0",
     "tslib": "~1.10.0",

src/app/app.module.ts

@@ -1,8 +1,4 @@
-import { Injector, NgModule } from '@angular/core';
-import hljs from 'highlight.js/lib/highlight';
-import css from 'highlight.js/lib/languages/css';
-import typescript from 'highlight.js/lib/languages/typescript';
-import xml from 'highlight.js/lib/languages/xml';
+import { NgModule } from '@angular/core';
 import { APP_CONFIG, ONTIMIZE_MODULES, ONTIMIZE_PROVIDERS, OntimizeWebModule } from 'ontimize-web-ngx';
 import { OGalleryModule } from 'ontimize-web-ngx-gallery';
 
@@ -12,17 +8,24 @@ import { CONFIG } from './app.config';
 import { DummyService } from './shared/services/dummy.service';
 import { CollapsibleStateService } from './shared/services/collapsible-state.service';
 import { ConfigCollapsibleStateService } from './shared/services/config-collapsible-state.service';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
-hljs.registerLanguage('typescript', typescript);
-hljs.registerLanguage('css', css);
-hljs.registerLanguage('xml', xml);
-
-
+/**
+ * Import specific languages to avoid importing everything
+ */
+export function getHighlightLanguages() {
+  return {
+    typescript: () => import('highlight.js/lib/languages/typescript'),
+    css: () => import('highlight.js/lib/languages/css'),
+    xml: () => import('highlight.js/lib/languages/xml')
+  };
+}
 @NgModule({
   declarations: [
     AppComponent,
   ],
   imports: [
+    HighlightModule,
     ONTIMIZE_MODULES,
     OntimizeWebModule,
     AppRoutingModule,
@@ -33,6 +36,12 @@ hljs.registerLanguage('xml', xml);
     { provide: ConfigCollapsibleStateService },
     { provide: APP_CONFIG, useValue: CONFIG },
     { provide: 'DummyService', useValue: DummyService },
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        languages: getHighlightLanguages()
+      }
+    },
     ...ONTIMIZE_PROVIDERS
   ],
   bootstrap: [AppComponent]

src/app/shared/highlight/highlight.component.html

@@ -1,10 +1,9 @@
-<section hljsContent=".highlight" fxFill>
+<section fxFill>
   <pre class="snippet" fxFill>
     <button mat-icon-button id="copy-btn" class="copy-btn" data-clipboard-target="#code">
       <mat-icon aria-label="Copy to clipboard">file_copy</mat-icon>
     </button>
-    <code id="code" class="highlight">
-      {{ templateContent }}
+    <code id="code" [highlight]="templateContent" [languages]="templateTypeArray" [lineNumbers]="true">
     </code>
   </pre>
 </section>

src/app/shared/highlight/highlight.component.scss

@@ -2,6 +2,7 @@
   margin: 0;
   position: relative;
   height: 0;
+  font-size: 14px;
 
   .hljs {
     position: absolute;

src/app/shared/highlight/highlight.component.ts

@@ -1,10 +1,10 @@
 import {
   Component,
-  ElementRef,
   OnInit,
-  OnDestroy,
   ViewEncapsulation,
-  ChangeDetectionStrategy
+  ChangeDetectionStrategy,
+  ElementRef,
+  OnDestroy
 } from '@angular/core';
 
 @Component({
@@ -23,11 +23,14 @@ export class HighlightComponent implements OnInit, OnDestroy {
   protected clipboard: any;
   templateContent;
   templateType;
+  templateTypeArray: Array<string>;
 
   constructor(protected elRef: ElementRef) {
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
+    this.templateTypeArray = this.parseTemplateType();
+
     if (window['Clipboard'] && !this.clipboard) {
       const copyBtn = this.elRef.nativeElement.querySelectorAll('button#copy-btn');
       if (copyBtn.length) {
@@ -50,6 +53,10 @@ export class HighlightComponent implements OnInit, OnDestroy {
     alert('Copied!');
   }
 
+  parseTemplateType() {
+    return [this.templateType === 'scss' ? 'css' : this.templateType];
+  }
+
   ngOnDestroy() {
     if (this.clipboard) {
       this.clipboard.destroy();

src/app/shared/shared.module.ts

@@ -3,18 +3,18 @@ import { OntimizeWebModule } from 'ontimize-web-ngx';
 
 import { ExampleComponent } from './example/example.component';
 import { NavigationBarService } from './navigation-bar.service';
-import { AngularHighlightJsModule } from 'angular2-highlight-js';
 import { HighlightComponent } from './highlight/highlight.component';
 import { HeaderButtonMenuComponent } from './header-button-menu/header-button-menu.component';
 import { CollapsibleStateService } from './services/collapsible-state.service';
 import { CollapsibleMenuComponent } from './collapsible-menu/collapsible-menu.component';
 import { DataStructureComponent } from './data-structure/data-structure.component';
 import { InputsCardComponent } from './inputs-card/inputs-card.component';
 import { ConfigCollapsibleStateService } from './services/config-collapsible-state.service';
+import { HighlightModule } from 'ngx-highlightjs';
 import { MatButtonModule } from '@angular/material/button';
 
 @NgModule({
-  imports: [OntimizeWebModule, AngularHighlightJsModule, MatButtonModule],
+  imports: [OntimizeWebModule, HighlightModule, MatButtonModule],
   declarations: [ExampleComponent, HighlightComponent, HeaderButtonMenuComponent, CollapsibleMenuComponent, DataStructureComponent, InputsCardComponent],
   providers: [NavigationBarService, CollapsibleStateService, ConfigCollapsibleStateService],
   exports: [OntimizeWebModule, ExampleComponent, HighlightComponent, HeaderButtonMenuComponent, CollapsibleMenuComponent, DataStructureComponent, InputsCardComponent]

src/app/shared/theme.service.ts

@@ -10,6 +10,8 @@ export interface DocsSiteTheme {
   href_dark: string;
   isDark?: boolean;
   isDefault?: boolean;
+  highlight: string;
+  highlight_dark: string;
 }
 
 @Injectable({
@@ -25,6 +27,8 @@ export class ThemeService {
       accent: '#1464a5',
       href: 'ontimize.css',
       href_dark: 'ontimize-dark.css',
+      highlight: 'solarized-light.css',
+      highlight_dark: 'solarized-dark.css',
       isDefault: true
     }
   ];
@@ -57,8 +61,10 @@ export class ThemeService {
 
     if (theme.isDark) {
       this._styleManager.setStyle('theme', `./assets/themes/${theme.href_dark}`);
+      this._styleManager.setStyle('theme-highlight', `./assets/themes/${theme.highlight_dark}`);
     } else {
       this._styleManager.setStyle('theme', `./assets/themes/${theme.href}`);
+      this._styleManager.setStyle('theme-highlight', `./assets/themes/${theme.highlight}`);
     }
 
     this.currentTheme.isDark = theme.isDark;

src/assets/themes/ontimize-dark.scss

@@ -4,8 +4,7 @@
 @include mat-core();
 
 /* Color definitions */
-$mat-custom-primary: (
-  50 : #f1f6fa,
+$mat-custom-primary: (50 : #f1f6fa,
   100 : #dce8f2,
   200 : #c5d9e9,
   300 : #adc9e0,
@@ -19,8 +18,7 @@ $mat-custom-primary: (
   A200 : #ebf5ff,
   A400 : #b8dcff,
   A700 : #9ed0ff,
-  contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #000000, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, )
-);
+  contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #000000, 500 : #000000, 600 : #000000, 700 : #000000, 800 : #000000, 900 : #000000, A100 : #000000, A200 : #000000, A400 : #000000, A700 : #000000, ));
 
 // Define a theme.
 $primary: mat-palette($mat-custom-primary);

src/assets/themes/ontimize.scss

@@ -4,8 +4,7 @@
 @include mat-core();
 
 /* Color definitions */
-$mat-custom-primary: (
-  50 : #e3ecf4,
+$mat-custom-primary: (50 : #e3ecf4,
   100 : #b9d1e4,
   200 : #8ab2d2,
   300 : #5b93c0,
@@ -19,11 +18,9 @@ $mat-custom-primary: (
   A200 : #75a7ff,
   A400 : #4286ff,
   A700 : #2876ff,
-  contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff)
-);
+  contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff));
 
-$mat-custom-accent: (
-  50 : #e3ecf4,
+$mat-custom-accent: (50 : #e3ecf4,
   100 : #b9d1e4,
   200 : #8ab2d2,
   300 : #5b93c0,
@@ -37,8 +34,7 @@ $mat-custom-accent: (
   A200 : #75a7ff,
   A400 : #4286ff,
   A700 : #2876ff,
-  contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff)
-);
+  contrast: (50 : #000000, 100 : #000000, 200 : #000000, 300 : #000000, 400 : #ffffff, 500 : #ffffff, 600 : #ffffff, 700 : #ffffff, 800 : #ffffff, 900 : #ffffff, A100 : #000000, A200 : #000000, A400 : #ffffff, A700 : #ffffff));
 
 // Define a theme.
 $primary: mat-palette($mat-custom-primary);