Added the [path] input to the fuse-highlight for loading source code externally

+ Removed highlight.js and angular2-markdown
+ Updated the Angular Material example viewer

package-lock.json

@@ -512,15 +512,6 @@
       "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-2.0.0.tgz",
       "integrity": "sha512-Jsa818fxtAtBA3Fp1u4mWV9tcpakM+bNYFFbB/AjKig2BtzZkeyLx3vjcBCfwPmXkK10kX2QKR8RDALk1w209A=="
     },
-    "angular2-markdown": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/angular2-markdown/-/angular2-markdown-1.6.0.tgz",
-      "integrity": "sha1-hja/narXD8NWMxJnB/+zPmhPurE=",
-      "requires": {
-        "marked": "0.3.9",
-        "prismjs": "1.9.0"
-      }
-    },
     "ansi-html": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@@ -4863,11 +4854,6 @@
       "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
       "dev": true
     },
-    "highlight.js": {
-      "version": "9.12.0",
-      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz",
-      "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4="
-    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6274,11 +6260,6 @@
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
       "dev": true
     },
-    "marked": {
-      "version": "0.3.9",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.9.tgz",
-      "integrity": "sha512-nW5u0dxpXxHfkHzzrveY45gCbi+R4PaO4WRZYqZNl+vB0hVGeqlFn0aOg1c8AKL63TrNFn9Bm2UP4AdiZ9TPLw=="
-    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",

package.json

@@ -43,12 +43,10 @@
     "@types/prismjs": "1.9.0",
     "angular-calendar": "0.23.0",
     "angular-in-memory-web-api": "0.5.2",
-    "angular2-markdown": "1.6.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.3",
     "d3": "4.12.0",
     "hammerjs": "2.0.8",
-    "highlight.js": "9.12.0",
     "intl": "1.2.5",
     "moment": "2.20.1",
     "ngrx-store-freeze": "0.2.0",

src/app/app.module.ts

@@ -12,7 +12,6 @@ import { FuseMainModule } from './main/main.module';
 import { FuseSplashScreenService } from './core/services/splash-screen.service';
 import { FuseConfigService } from './core/services/config.service';
 import { FuseNavigationService } from './core/components/navigation/navigation.service';
-import { MarkdownModule } from 'angular2-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 import { AppStoreModule } from './store/store.module';
 
@@ -57,7 +56,6 @@ const appRoutes: Routes = [
         BrowserAnimationsModule,
         RouterModule.forRoot(appRoutes),
         SharedModule,
-        MarkdownModule.forRoot(),
         TranslateModule.forRoot(),
         InMemoryWebApiModule.forRoot(FuseFakeDbService, {
             delay             : 0,

src/app/core/components/highlight/highlight.component.ts

@@ -1,4 +1,6 @@
 import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
 import * as Prism from 'prismjs/prism';
 import './prism-languages';
 
@@ -11,25 +13,46 @@ export class FuseHighlightComponent implements OnInit
 {
     @ContentChild('source') source: ElementRef;
     @Input('lang') lang: string;
+    @Input('path') path: string;
 
     constructor(
-        private elementRef: ElementRef
+        private elementRef: ElementRef,
+        private http: HttpClient
     )
     {
-
     }
 
     ngOnInit()
     {
-        const originalSource = this.source.nativeElement.value;
+        // If there is no language defined, return...
-
+        if ( !this.lang )
-        if ( !originalSource || !this.lang )
         {
             return;
         }
 
+        // If the path is defined...
+        if ( this.path )
+        {
+            // Get the source
+            this.http.get(this.path, {responseType: 'text'}).subscribe((response) => {
+
+                // Highlight it
+                this.highlight(response);
+            });
+        }
+
+        // If the path is not defined and the source element exists...
+        if ( !this.path && this.source )
+        {
+            // Highlight it
+            this.highlight(this.source.nativeElement.value);
+        }
+    }
+
+    highlight(sourceCode)
+    {
         // Split the source into lines
-        const sourceLines = originalSource.split('\n');
+        const sourceLines = sourceCode.split('\n');
 
         // Remove the first and the last line of the source
         // code if they are blank lines. This way, the html
@@ -73,6 +96,7 @@ export class FuseHighlightComponent implements OnInit
         // Replace the innerHTML of the component with the highlighted code
         this.elementRef.nativeElement.innerHTML =
             '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
+
     }
 }
 

src/app/core/modules/shared.module.ts

@@ -21,7 +21,6 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
 import { FuseTranslationLoaderService } from '../services/translation-loader.service';
 import { CookieService } from 'ngx-cookie-service';
-import { MarkdownModule } from 'angular2-markdown';
 import { TranslateModule } from '@ngx-translate/core';
 
 @NgModule({
@@ -44,8 +43,7 @@ import { TranslateModule } from '@ngx-translate/core';
         ReactiveFormsModule,
         ColorPickerModule,
         NgxDnDModule,
-        NgxDatatableModule,
+        NgxDatatableModule
-        MarkdownModule
     ],
     exports        : [
         FlexLayoutModule,
@@ -64,7 +62,6 @@ import { TranslateModule } from '@ngx-translate/core';
         NgxDatatableModule,
         FuseIfOnDomDirective,
         FuseMaterialColorPickerComponent,
-        MarkdownModule,
         TranslateModule
     ],
     entryComponents: [

src/app/core/scss/partials/plugins/_prism.scss

@@ -2,7 +2,7 @@
 
 $base00: #263238;
 $base01: #2C393F;
-$base02: #4A5A62;
+$base02: #62727A;
 $base03: #707880;
 $base04: #C9CCD3;
 $base05: #CDD3DE;

src/app/main/content/components/angular-material/example-viewer/example-viewer.html

@@ -7,9 +7,11 @@
         <button mat-icon-button type="button" (click)="toggleSourceView()"
                 [matTooltip]="'View source'">
             <mat-icon>
-                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
+                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit=""
+                     preserveAspectRatio="xMidYMid meet" focusable="false">
                     <path fill="none" d="M0 0h24v24H0V0z"></path>
-                    <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
+                    <path
+                        d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"></path>
                 </svg>
             </mat-icon>
         </button>
@@ -23,29 +25,40 @@
             <mat-tab label="CSS"></mat-tab>
         </mat-tab-group>
         <div class="tab-content">
-            <section class="tab" *ngIf="selectedIndex === 0" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+            <section class="tab" *ngIf="selectedIndex === 0"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(htmlView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #htmlView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'"></div>
+                <fuse-highlight lang="html"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.html'">
+                </fuse-highlight>
             </section>
-            <section class="tab" *ngIf="selectedIndex === 1" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+
+            <section class="tab" *ngIf="selectedIndex === 1"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(tsView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #tsView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'"></div>
+                <fuse-highlight lang="typescript"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.ts'">
+                </fuse-highlight>
             </section>
-            <section class="tab" *ngIf="selectedIndex === 2" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
+
+            <section class="tab" *ngIf="selectedIndex === 2"
+                     [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}">
                 <button mat-icon-button type="button" class="example-source-copy"
                         title="Copy example source" aria-label="Copy example source to clipboard"
                         (click)="copySource(cssView.el.nativeElement.innerText)">
                     <mat-icon>content_copy</mat-icon>
                 </button>
-                <div Markdown #cssView class="example-source" [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'"></div>
+                <fuse-highlight lang="css"
+                                [path]="'/assets/angular-material-examples/'+example+'/'+example+'-example.css'">
+                </fuse-highlight>
             </section>
         </div>
     </div>

src/app/main/content/components/highlight/highlight.component.html

@@ -61,7 +61,7 @@
             <p class="py-8" fxLayout="row" fxLayoutAlign="start center">
                 <code class="mr-16">lang</code>
                 <span>
-                    Language of the code to be highlighted. All highlight.js languages can be used.
+                    Language of the code to be highlighted.
                 </span>
             </p>
         </div>