From 2288905cbdbb4e06fc345bd4bd1263e4845ce5fe Mon Sep 17 00:00:00 2001
From: Sercan Yemen <sercanyemen@gmail.com>
Date: Mon, 8 Jan 2018 15:29:04 +0300
Subject: [PATCH] Merge branch 'master' of
 https://github.com/withinpixels/fuse2 + fuse-hljs replaced with
 fuse-highlight

---
 package-lock.json                             |   5 +
 package.json                                  |   2 +
 .../highlight/highlight.component.scss        |   5 +-
 .../highlight/highlight.component.ts          |  40 +-
 .../components/highlight/prism-languages.ts   |  16 +
 src/app/core/modules/shared.module.ts         |   6 +-
 .../core/scss/partials/plugins/_plugins.scss  |   1 -
 .../core/scss/partials/plugins/_prism.scss    |   2 +-
 .../google-maps/google-maps.component.html    |   6 +-
 .../components/cards/cards.component.html     | 347 +++++++++++-------
 .../components/cards/cards.component.scss     |   1 +
 .../content/components/components.module.ts   |  10 +-
 .../countdown/countdown.component.html        |   8 +-
 .../highlight/highlight.component.html        |  30 +-
 .../highlight/highlight.component.ts          |   8 +-
 .../material-color-picker.component.html      |   8 +-
 .../multi-language.component.html             |  24 +-
 .../navigation/navigation.component.html      |  56 +--
 .../search-bar/search-bar.component.html      |   8 +-
 .../shortcuts/shortcuts.component.html        |   8 +-
 .../components/widget/widget.component.html   |  12 +-
 .../services/config/config.component.html     |  10 +-
 .../main/content/services/services.module.ts  |   1 +
 .../splash-screen.component.html              |  10 +-
 .../padding-margin.component.html             |  40 +-
 .../padding-margin.component.scss             |   1 -
 .../width-height/width-height.component.html  |  32 +-
 .../width-height/width-height.component.scss  |   1 -
 .../blockquotes-lists.component.html          |  24 +-
 .../blockquotes-lists.component.scss          |   1 -
 .../tabs/headings/headings.component.html     |  68 ++--
 .../tabs/headings/headings.component.scss     |   1 -
 .../tabs/helpers/helpers.component.html       |  52 +--
 .../tabs/helpers/helpers.component.scss       |   1 -
 .../inline-text-elements.component.html       |  52 +--
 .../inline-text-elements.component.scss       |   1 -
 src/app/navigation/navigation.model.ts        |   6 +-
 37 files changed, 529 insertions(+), 375 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index de35b092..485922f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -358,6 +358,11 @@
       "integrity": "sha512-d1Twx1NM49dQ7jbNZfaHTQWuYL9cFVrGxYpbc3BvMf4626lOJOZnp2aJQNB9vP/WX3UOe1TrTUMABrGRu6FZhg==",
       "dev": true
     },
+    "@types/prismjs": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.9.0.tgz",
+      "integrity": "sha512-zeh+xd2pcCvWm1XtWLR4v5pzZMybKeq6X8Q4cIZMMx8GmyKDUfJaOtw+JaONHUQt5ncKFXezl8QGIDQsSF5YfA=="
+    },
     "@types/q": {
       "version": "0.0.32",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-0.0.32.tgz",
diff --git a/package.json b/package.json
index 926f200c..a747c17f 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@swimlane/ngx-charts": "7.0.1",
     "@swimlane/ngx-datatable": "11.1.7",
     "@swimlane/ngx-dnd": "3.1.0",
+    "@types/prismjs": "1.9.0",
     "angular-calendar": "0.23.0",
     "angular-in-memory-web-api": "0.5.2",
     "angular2-markdown": "1.6.0",
@@ -54,6 +55,7 @@
     "ngx-color-picker": "5.3.0",
     "ngx-cookie-service": "1.0.9",
     "perfect-scrollbar": "1.3.0",
+    "prismjs": "1.9.0",
     "rxjs": "5.5.6",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.18"
diff --git a/src/app/core/components/highlight/highlight.component.scss b/src/app/core/components/highlight/highlight.component.scss
index 8fdbe2d4..1844f192 100644
--- a/src/app/core/components/highlight/highlight.component.scss
+++ b/src/app/core/components/highlight/highlight.component.scss
@@ -1,3 +1,6 @@
 :host {
-
+    display: block;
+    padding: 8px;
+    background: #263238;
+    cursor: text;
 }
\ No newline at end of file
diff --git a/src/app/core/components/highlight/highlight.component.ts b/src/app/core/components/highlight/highlight.component.ts
index 3bf9c1fc..1066b449 100644
--- a/src/app/core/components/highlight/highlight.component.ts
+++ b/src/app/core/components/highlight/highlight.component.ts
@@ -1,15 +1,14 @@
 import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core';
-import * as hljs from 'highlight.js';
+import * as Prism from 'prismjs/prism';
+import './prism-languages';
 
 @Component({
-    selector : 'fuse-hljs',
+    selector : 'fuse-highlight',
     template : ' ',
-    styleUrls: ['./hljs.component.scss']
+    styleUrls: ['./highlight.component.scss']
 })
-export class FuseHljsComponent implements OnInit
+export class FuseHighlightComponent implements OnInit
 {
-    hljs: any;
-
     @ContentChild('source') source: ElementRef;
     @Input('lang') lang: string;
 
@@ -17,7 +16,7 @@ export class FuseHljsComponent implements OnInit
         private elementRef: ElementRef
     )
     {
-        this.hljs = hljs;
+
     }
 
     ngOnInit()
@@ -32,6 +31,20 @@ export class FuseHljsComponent implements OnInit
         // Split the source into lines
         const sourceLines = originalSource.split('\n');
 
+        // Remove the first and the last line of the source
+        // code if they are blank lines. This way, the html
+        // can be formatted properly while using fuse-highlight
+        // component
+        if ( !sourceLines[0].trim() )
+        {
+            sourceLines.shift();
+        }
+
+        if ( !sourceLines[sourceLines.length - 1].trim() )
+        {
+            sourceLines.pop();
+        }
+
         // Find the first non-whitespace char index in
         // the first line of the source code
         const indexOfFirstChar = sourceLines[0].search(/\S|$/);
@@ -39,20 +52,27 @@ export class FuseHljsComponent implements OnInit
         // Generate the trimmed source
         let source = '';
 
-        // Iterate through all the lines and trim the
-        // beginning white space depending on the index
+        // Iterate through all the lines
         sourceLines.forEach((line, index) => {
 
+            // Trim the beginning white space depending on the index
+            // and concat the source code
             source = source + line.substr(indexOfFirstChar, line.length);
 
+            // If it's not the last line...
             if ( index !== sourceLines.length - 1 )
             {
+                // Add a line break at the end
                 source = source + '\n';
             }
         });
 
+        // Generate the highlighted code
+        const highlightedCode = Prism.highlight(source, Prism.languages[this.lang]);
+
+        // Replace the innerHTML of the component with the highlighted code
         this.elementRef.nativeElement.innerHTML =
-            `<pre><code class="highlight">` + this.hljs.highlight(this.lang, source).value + `</code></pre>`;
+            '<pre><code class="highlight language-' + this.lang + '">' + highlightedCode + '</code></pre>';
     }
 }
 
diff --git a/src/app/core/components/highlight/prism-languages.ts b/src/app/core/components/highlight/prism-languages.ts
index e69de29b..14842a35 100644
--- a/src/app/core/components/highlight/prism-languages.ts
+++ b/src/app/core/components/highlight/prism-languages.ts
@@ -0,0 +1,16 @@
+import 'prismjs/prism';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-diff';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-perl';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-typescript';
diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts
index 9cd8dc98..168a0c4b 100644
--- a/src/app/core/modules/shared.module.ts
+++ b/src/app/core/modules/shared.module.ts
@@ -15,7 +15,7 @@ import { FuseConfirmDialogComponent } from '../components/confirm-dialog/confirm
 import { FuseCountdownComponent } from '../components/countdown/countdown.component';
 import { FuseMatchMedia } from '../services/match-media.service';
 import { FuseNavbarVerticalService } from '../../main/navbar/vertical/navbar-vertical.service';
-import { FuseHljsComponent } from '../components/hljs/hljs.component';
+import { FuseHighlightComponent } from '../components/highlight/highlight.component';
 import { FusePerfectScrollbarDirective } from '../directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';
 import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-dom.directive';
 import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component';
@@ -30,7 +30,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FuseConfirmDialogComponent,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FuseIfOnDomDirective,
         FusePerfectScrollbarDirective,
         FuseMaterialColorPickerComponent
@@ -56,7 +56,7 @@ import { TranslateModule } from '@ngx-translate/core';
         FuseMatSidenavTogglerDirective,
         FusePipesModule,
         FuseCountdownComponent,
-        FuseHljsComponent,
+        FuseHighlightComponent,
         FusePerfectScrollbarDirective,
         ReactiveFormsModule,
         ColorPickerModule,
diff --git a/src/app/core/scss/partials/plugins/_plugins.scss b/src/app/core/scss/partials/plugins/_plugins.scss
index f9d4c979..3ca67732 100644
--- a/src/app/core/scss/partials/plugins/_plugins.scss
+++ b/src/app/core/scss/partials/plugins/_plugins.scss
@@ -1,4 +1,3 @@
-@import "highlight";
 @import "prism";
 @import "perfect-scrollbar";
 @import "ngx-datatable";
diff --git a/src/app/core/scss/partials/plugins/_prism.scss b/src/app/core/scss/partials/plugins/_prism.scss
index 40eb6fec..276ee250 100644
--- a/src/app/core/scss/partials/plugins/_prism.scss
+++ b/src/app/core/scss/partials/plugins/_prism.scss
@@ -2,7 +2,7 @@
 
 $base00: #263238;
 $base01: #2C393F;
-$base02: #37474F;
+$base02: #4A5A62;
 $base03: #707880;
 $base04: #C9CCD3;
 $base05: #CDD3DE;
diff --git a/src/app/main/content/components-third-party/google-maps/google-maps.component.html b/src/app/main/content/components-third-party/google-maps/google-maps.component.html
index 04f955ed..a85e5cc0 100644
--- a/src/app/main/content/components-third-party/google-maps/google-maps.component.html
+++ b/src/app/main/content/components-third-party/google-maps/google-maps.component.html
@@ -38,13 +38,13 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <agm-map [latitude]="lat" [longitude]="lng">
                             <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
                         </agm-map>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/cards/cards.component.html b/src/app/main/content/components/cards/cards.component.html
index 0d62a6e0..8b50a74e 100644
--- a/src/app/main/content/components/cards/cards.component.html
+++ b/src/app/main/content/components/cards/cards.component.html
@@ -52,9 +52,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -66,13 +68,14 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -110,9 +113,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -124,8 +129,7 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                                 <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@@ -134,8 +138,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -166,9 +172,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -178,13 +186,14 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -221,9 +230,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card mat-indigo-bg">
 
                                 <div class="p-16">
@@ -233,10 +244,9 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     All cards can be mixed with Fuse Color Classes to have different colors. This
-                                    greatly
-                                    increases the unique variations of all cards. Cards provide context and an entry
-                                    point to
-                                    more robust information and views, and their content and quantity can vary greatly.
+                                    greatly increases the unique variations of all cards. Cards provide context and an
+                                    entry point to more robust information and views, and their content and quantity can
+                                    vary greatly.
                                 </div>
 
                                 <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@@ -245,8 +255,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -274,9 +286,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -287,8 +301,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -316,9 +332,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card1.jpg">
@@ -329,8 +347,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -371,9 +391,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="position-relative">
@@ -397,8 +419,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -442,9 +466,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -462,8 +488,7 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                                 <div class="p-8 pt-0" fxLayout="row" fxLayoutAlign="start center">
@@ -472,8 +497,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -527,9 +554,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card3.jpg">
@@ -561,16 +590,17 @@
                                 <div class="card-expand-area" *ngIf="card9Expanded" [@expandCollapse]>
                                     <div class="card-expanded-content">
                                         Card content that exceeds the maximum card height is truncated and does not
-                                        scroll, but
-                                        the card can be expanded. Once expanded, the card may exceed the maximum height
-                                        of the
-                                        view. In this case, the card will scroll with the card collection.
+                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
+                                        maximum height of the view. In this case, the card will scroll with the card
+                                        collection.
                                     </div>
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -619,9 +649,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card2.jpg">
@@ -647,16 +679,17 @@
                                 <div class="card-expand-area" *ngIf="card10Expanded" [@expandCollapse]>
                                     <div class="card-expanded-content">
                                         Card content that exceeds the maximum card height is truncated and does not
-                                        scroll, but
-                                        the card can be expanded. Once expanded, the card may exceed the maximum height
-                                        of the
-                                        view. In this case, the card will scroll with the card collection.
+                                        scroll, but the card can be expanded. Once expanded, the card may exceed the
+                                        maximum height of the view. In this case, the card will scroll with the card
+                                        collection.
                                     </div>
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -698,9 +731,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="start center">
@@ -721,13 +756,14 @@
 
                                 <div class="p-16 pt-0 line-height-1.75">
                                     Cards provide context and an entry point to more robust information and views, and
-                                    their
-                                    content and quantity can vary greatly.
+                                    their content and quantity can vary greatly.
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -764,9 +800,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card2.jpg">
@@ -786,8 +824,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -829,9 +869,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card variable-width">
 
                                 <div class="position-relative">
@@ -856,8 +898,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -896,9 +940,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -920,8 +966,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -960,9 +1008,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@@ -984,8 +1034,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1024,9 +1076,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between start">
@@ -1048,8 +1102,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1116,9 +1172,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <img src="assets/images/cards/card2.jpg">
@@ -1169,8 +1227,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1282,9 +1342,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -1379,8 +1441,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1485,9 +1549,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="mat-light-blue-600-bg">
@@ -1575,8 +1641,10 @@
                                 </mat-tab-group>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1665,9 +1733,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -1739,8 +1809,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1814,9 +1886,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -1886,8 +1960,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -1993,9 +2069,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center">
@@ -2084,8 +2162,9 @@
                                 </mat-tab-group>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
                 </div>
                 <!-- / SOURCE -->
 
@@ -2123,9 +2202,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16 pb-0">
@@ -2146,8 +2227,10 @@
                                 </mat-selection-list>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -2240,9 +2323,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -2318,8 +2403,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -2357,9 +2444,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -2380,8 +2469,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
@@ -2420,9 +2511,11 @@
                 <!-- / PREVIEW -->
 
                 <!-- SOURCE -->
-                <div class="card-source mat-grey-200-bg" fxHide fxShow.gt-sm>
-                    <fuse-hljs lang="html" class="source-code">
-                        <textarea #source hidden="hidden">
+                <div class="card-source" fxHide fxShow.gt-sm>
+
+                    <fuse-highlight lang="html">
+                        <textarea #source>
+
                             <div class="fuse-card">
 
                                 <div class="p-16">
@@ -2444,8 +2537,10 @@
                                 </div>
 
                             </div>
+
                         </textarea>
-                    </fuse-hljs>
+                    </fuse-highlight>
+
                 </div>
                 <!-- / SOURCE -->
 
diff --git a/src/app/main/content/components/cards/cards.component.scss b/src/app/main/content/components/cards/cards.component.scss
index 36075af0..37f9b98b 100644
--- a/src/app/main/content/components/cards/cards.component.scss
+++ b/src/app/main/content/components/cards/cards.component.scss
@@ -38,6 +38,7 @@
                     border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 
                     .card-source {
+                        background: #263238;
                         display: flex !important;
                         flex: 1;
                         max-height: 400px;
diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts
index eea3144a..754b2631 100644
--- a/src/app/main/content/components/components.module.ts
+++ b/src/app/main/content/components/components.module.ts
@@ -3,7 +3,7 @@ import { SharedModule } from '../../../core/modules/shared.module';
 import { RouterModule } from '@angular/router';
 import { FuseCardsDocsComponent } from './cards/cards.component';
 import { FuseCountdownDocsComponent } from './countdown/countdown.component';
-import { FuseHljsDocsComponent } from './hljs/hljs.component';
+import { FuseHighlightDocsComponent } from './highlight/highlight.component';
 import { FuseMaterialColorPickerDocsComponent } from './material-color-picker/material-color-picker.component';
 import { FuseMultiLanguageDocsComponent } from './multi-language/multi-language.component';
 import { FuseNavigationDocsComponent } from './navigation/navigation.component';
@@ -24,8 +24,8 @@ const routes = [
         component: FuseCountdownDocsComponent
     },
     {
-        path     : 'highlightjs',
-        component: FuseHljsDocsComponent
+        path     : 'highlight',
+        component: FuseHighlightDocsComponent
     },
     {
         path     : 'material-color-picker',
@@ -64,7 +64,7 @@ const routes = [
     declarations: [
         FuseCardsDocsComponent,
         FuseCountdownDocsComponent,
-        FuseHljsDocsComponent,
+        FuseHighlightDocsComponent,
         FuseMaterialColorPickerDocsComponent,
         FuseMultiLanguageDocsComponent,
         FuseNavigationDocsComponent,
@@ -73,6 +73,6 @@ const routes = [
         FuseWidgetDocsComponent
     ]
 })
-export class ComponentsModule
+export class FuseComponentsModule
 {
 }
diff --git a/src/app/main/content/components/countdown/countdown.component.html b/src/app/main/content/components/countdown/countdown.component.html
index 982ac683..bffd539c 100644
--- a/src/app/main/content/components/countdown/countdown.component.html
+++ b/src/app/main/content/components/countdown/countdown.component.html
@@ -29,12 +29,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-countdown eventDate="2019-07-28"></fuse-countdown>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/highlight/highlight.component.html b/src/app/main/content/components/highlight/highlight.component.html
index c110a5a8..1b6c8315 100644
--- a/src/app/main/content/components/highlight/highlight.component.html
+++ b/src/app/main/content/components/highlight/highlight.component.html
@@ -1,4 +1,4 @@
-<div id="hljs" class="page-layout simple fullwidth" fusePerfectScrollbar>
+<div id="highlight" class="page-layout simple fullwidth" fusePerfectScrollbar>
 
     <!-- HEADER -->
     <div class="header mat-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
@@ -8,7 +8,7 @@
                 <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                 <span class="secondary-text">Components</span>
             </div>
-            <div class="h2 mt-16">highlight.js</div>
+            <div class="h2 mt-16">Highlight</div>
         </div>
     </div>
     <!-- / HEADER -->
@@ -17,36 +17,42 @@
     <div class="content p-24">
 
         <p>
-            <code>fuse-hljs</code> is a custom built Fuse component allows to show syntax highlighted codes.
+            <code>fuse-highlight</code> is a custom built Fuse component allows to show syntax highlighted codes.
         </p>
 
         <div class="my-48">
             <h2>Sample</h2>
             <p fxLayout="row" fxLayoutAlign="start start">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
                         <div class="title">
                             <span>Example Title</span>
                         </div>
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
-&lt;fuse-hljs lang="html" class="source-code"&gt;
-    &lt;textarea #source hidden="hidden"&gt;
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
+&lt;fuse-highlight lang="html"&gt;
+    &lt;textarea #source&gt;
         &lt;div class="title"&gt;
             &lt;span&gt;Example Title&lt;/span&gt;
         &lt;/div&gt;
     &lt;/textarea&gt;
-&lt;/fuse-hljs&gt;
+&lt;/fuse-highlight&gt;
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/highlight/highlight.component.ts b/src/app/main/content/components/highlight/highlight.component.ts
index 142ab034..46b3f84e 100644
--- a/src/app/main/content/components/highlight/highlight.component.ts
+++ b/src/app/main/content/components/highlight/highlight.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector   : 'fuse-hljs-docs',
-    templateUrl: './hljs.component.html',
-    styleUrls  : ['./hljs.component.scss']
+    selector   : 'fuse-highlight-docs',
+    templateUrl: './highlight.component.html',
+    styleUrls  : ['./highlight.component.scss']
 })
-export class FuseHljsDocsComponent
+export class FuseHighlightDocsComponent
 {
     constructor()
     {
diff --git a/src/app/main/content/components/material-color-picker/material-color-picker.component.html b/src/app/main/content/components/material-color-picker/material-color-picker.component.html
index b338d722..d27ee235 100644
--- a/src/app/main/content/components/material-color-picker/material-color-picker.component.html
+++ b/src/app/main/content/components/material-color-picker/material-color-picker.component.html
@@ -30,14 +30,14 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-material-color-picker [(selectedClass)]="colorClass"
                                                     (onValueChange)="onSettingsChange()">
                         </fuse-material-color-picker>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/multi-language/multi-language.component.html b/src/app/main/content/components/multi-language/multi-language.component.html
index 76abc8f6..9a29d1ee 100644
--- a/src/app/main/content/components/multi-language/multi-language.component.html
+++ b/src/app/main/content/components/multi-language/multi-language.component.html
@@ -41,9 +41,9 @@
                 translation data:
             </p>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         // i18n/en.ts
                         export const locale = {
                             lang: 'en',
@@ -64,7 +64,7 @@
                             }
                         };
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -75,9 +75,9 @@
                 <code>mail.component.ts</code> file:
             </p>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         // Your imports
                         import { ... } from '..';
 
@@ -100,7 +100,7 @@
                             ...
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -110,9 +110,9 @@
                 Changing the current language can happen instantly. Simply call the <code>use</code> method from the
                 translate service:
             </p>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         import { TranslateService } from '@ngx-translate/core';
 
                         constructor(private translate: TranslateService) {}
@@ -123,7 +123,7 @@
                             this.translate.use('tr');
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
             <p>
                 More detailed usage of the translation service can be found in the <code>toolbar.component.ts</code>
diff --git a/src/app/main/content/components/navigation/navigation.component.html b/src/app/main/content/components/navigation/navigation.component.html
index 6625f89a..9238d01d 100644
--- a/src/app/main/content/components/navigation/navigation.component.html
+++ b/src/app/main/content/components/navigation/navigation.component.html
@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-navigation></fuse-navigation>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -49,9 +49,9 @@
 
         <div class="my-48">
             <h3>Grouping</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'COMPONENTS',
                             'translate': 'NAV.COMPONENTS',
@@ -65,15 +65,15 @@
                             ]
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
         <div class="my-48">
             <h3>Collapsable</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'Datatables',
                             'translate': 'NAV.DATATABLES',
@@ -88,15 +88,15 @@
                             ]
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
         <div class="my-48">
             <h3>Item</h3>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="json" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="json">
+                    <textarea #source>
                         {
                             'title'    : 'Countdown',
                             'translate': 'NAV.COUNTDOWN',
@@ -105,7 +105,7 @@
                             'url'      : '/components/countdown'
                         },
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
@@ -132,9 +132,9 @@
 
             <h4>Update navigation item on-the-fly</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         updateMailBadge()
                         {
                             // Get the mail nav item
@@ -144,7 +144,7 @@
                             mailNavItem.badge.title = 35;
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24 mb-64">
@@ -157,9 +157,9 @@
 
             <h4>Add a subitem to the Calendar nav item</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         addSubitemToCalendar()
                         {
                             // Prepare the new nav item
@@ -174,7 +174,7 @@
                             this.navigationService.addNavigationItem('applications.calendar', newNavItem);
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24 mb-64">
@@ -187,9 +187,9 @@
 
             <h4>Add a nav item with custom function</h4>
 
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
                         addNavItemWithCustomFunction()
                         {
                             // Prepare the new nav item
@@ -209,7 +209,7 @@
                             applicationsNavItem.children.unshift(newNavItem);
                         }
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
 
             <div class="mt-24">
diff --git a/src/app/main/content/components/search-bar/search-bar.component.html b/src/app/main/content/components/search-bar/search-bar.component.html
index c1c643a7..069f9eab 100644
--- a/src/app/main/content/components/search-bar/search-bar.component.html
+++ b/src/app/main/content/components/search-bar/search-bar.component.html
@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-search-bar (onInput)="search($event)"></fuse-search-bar>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/shortcuts/shortcuts.component.html b/src/app/main/content/components/shortcuts/shortcuts.component.html
index bdcdd4cc..2e8c87eb 100644
--- a/src/app/main/content/components/shortcuts/shortcuts.component.html
+++ b/src/app/main/content/components/shortcuts/shortcuts.component.html
@@ -23,12 +23,12 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+                <fuse-highlight lang="html">
+                    <textarea #source>
                         <fuse-shortcuts></fuse-shortcuts>
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
             </p>
         </div>
 
diff --git a/src/app/main/content/components/widget/widget.component.html b/src/app/main/content/components/widget/widget.component.html
index 58315761..a8b2f951 100644
--- a/src/app/main/content/components/widget/widget.component.html
+++ b/src/app/main/content/components/widget/widget.component.html
@@ -62,9 +62,11 @@
 
         <div class="my-48">
             <h2>Usage</h2>
-            <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="html" class="source-code">
-                    <textarea #source hidden="hidden">
+            <p class="py-8">
+
+                <fuse-highlight lang="html">
+                    <textarea #source>
+
                         <fuse-widget class="" fxLayout="column" fxFlex="100" fxFlex.gt-xs="50" fxFlex.gt-md="25">
 
                             <!-- Front -->
@@ -97,8 +99,10 @@
                             <!-- / Back -->
 
                         </fuse-widget>
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
diff --git a/src/app/main/content/services/config/config.component.html b/src/app/main/content/services/config/config.component.html
index 3506a56a..604eea39 100644
--- a/src/app/main/content/services/config/config.component.html
+++ b/src/app/main/content/services/config/config.component.html
@@ -24,8 +24,10 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
+
                         export class SomeComponent
                         {
                             settings: any;
@@ -61,8 +63,10 @@
                                 });
                             }
                         }
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
diff --git a/src/app/main/content/services/services.module.ts b/src/app/main/content/services/services.module.ts
index 2b55e89b..75be1738 100644
--- a/src/app/main/content/services/services.module.ts
+++ b/src/app/main/content/services/services.module.ts
@@ -25,6 +25,7 @@ const routes = [
         FuseSplashScreenServiceDocsComponent
     ]
 })
+
 export class FuseServicesModule
 {
 }
diff --git a/src/app/main/content/services/splash-screen/splash-screen.component.html b/src/app/main/content/services/splash-screen/splash-screen.component.html
index bb0519c9..8b72d5ef 100644
--- a/src/app/main/content/services/splash-screen/splash-screen.component.html
+++ b/src/app/main/content/services/splash-screen/splash-screen.component.html
@@ -25,8 +25,10 @@
         <div class="my-48">
             <h2>Usage</h2>
             <p class="mat-grey-200-bg py-8">
-                <fuse-hljs lang="ts" class="source-code">
-                    <textarea #source hidden="hidden">
+
+                <fuse-highlight lang="typescript">
+                    <textarea #source>
+
                         export class SomeComponent
                         {
                             constructor(private fuseSplashScreen: FuseSplashScreenService) {}
@@ -36,8 +38,10 @@
                                 this.fuseSplashScreen.hide();
                             }
                         }
+
                     </textarea>
-                </fuse-hljs>
+                </fuse-highlight>
+
             </p>
         </div>
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
index ff07fd51..52fa03ed 100644
--- a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
+++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html
@@ -10,12 +10,12 @@
                 <span>p-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-0">No padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -26,12 +26,12 @@
                 <span>p-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-4">4px padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -42,12 +42,12 @@
                 <span>p-12</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="p-12">12px padding</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -69,7 +69,7 @@
                 <span>py-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="pt-0">0 padding from top</span>
@@ -79,7 +79,7 @@
                     <span class="px-0">0 padding from left and right</span>
                     <span class="py-0">0 padding from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -95,7 +95,7 @@
                 <span>py-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="pt-4">4px padding from top</span>
@@ -105,7 +105,7 @@
                     <span class="px-4">4px padding from left and right</span>
                     <span class="py-4">4px padding from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -121,12 +121,12 @@
                 <span>m-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-0">No margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -137,12 +137,12 @@
                 <span>m-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-4">4px margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -153,12 +153,12 @@
                 <span>m-12</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="m-12">12px margin</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -180,7 +180,7 @@
                 <span>my-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mt-0">0 margin from top</span>
@@ -190,7 +190,7 @@
                     <span class="mx-0">0 margin from left and right</span>
                     <span class="my-0">0 margin from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -206,7 +206,7 @@
                 <span>my-4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mt-4">4px margin from top</span>
@@ -216,7 +216,7 @@
                     <span class="mx-4">4px margin from left and right</span>
                     <span class="my-4">4px margin from top and bottom</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
index 17201e2f..a54cf7ba 100644
--- a/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
+++ b/src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
index 199c935b..93003f6f 100644
--- a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
+++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html
@@ -10,12 +10,12 @@
                 <span>w-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-0">0px width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -26,12 +26,12 @@
                 <span>w-100</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-100">100px width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -42,12 +42,12 @@
                 <span>w-25-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-25-p">25% width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -58,12 +58,12 @@
                 <span>w-100-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="w-100-p">100% width</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -79,12 +79,12 @@
                 <span>h-0</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-0">0px height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -95,12 +95,12 @@
                 <span>h-100</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-100">100px height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -111,12 +111,12 @@
                 <span>h-25-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-25-p">25% height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -127,12 +127,12 @@
                 <span>h-100-p</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="h-100-p">100% height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
index d1ed4228..073878fb 100644
--- a/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
+++ b/src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html
index fc28433b..97e71b48 100644
--- a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html
+++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.html
@@ -14,7 +14,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote>
@@ -23,7 +23,7 @@
                         </p>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -40,7 +40,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote>
@@ -52,7 +52,7 @@
                         </footer>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -69,7 +69,7 @@
                 </blockquote>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <blockquote class="reverse">
@@ -81,7 +81,7 @@
                         </footer>
                     </blockquote>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -108,7 +108,7 @@
                 </ol>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <ol>
@@ -124,7 +124,7 @@
                         <li>Ordered list item</li>
                     </ol>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -145,7 +145,7 @@
                 </ul>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <ul>
@@ -161,7 +161,7 @@
                         <li>Unordered list item</li>
                     </ul>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -183,7 +183,7 @@
                 </dl>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <dl>
@@ -194,7 +194,7 @@
                         <dd>This is also another definition description</dd>
                     </dl>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss
index a4340ab6..91755f27 100644
--- a/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss
+++ b/src/app/main/content/ui/typography/tabs/blockquotes-lists/blockquotes-lists.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.html b/src/app/main/content/ui/typography/tabs/headings/headings.component.html
index 1d320c6c..389e725e 100644
--- a/src/app/main/content/ui/typography/tabs/headings/headings.component.html
+++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.html
@@ -11,12 +11,12 @@
                 <span class="mat-display-4">Display 4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-4">Display 4</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -27,12 +27,12 @@
                 <span class="mat-display-3">Display 3</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-3">Display 3</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -43,12 +43,12 @@
                 <span class="mat-display-2">Display 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-2">Display 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
         </div>
 
         <div fxLayout="column" fxLayout.gt-md="row">
@@ -58,12 +58,12 @@
                 <span class="mat-display-1">Display 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-display-1">Display 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -74,12 +74,12 @@
                 <span class="mat-headline">Headline</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-headline">Headline</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -90,12 +90,12 @@
                 <span class="mat-title">Title</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-title">Title</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -106,12 +106,12 @@
                 <span class="mat-subheading-2">Subheading 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-subheading-2">Subheading 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -122,12 +122,12 @@
                 <span class="mat-subheading-1">Subheading 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-subheading-1">Subheading 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -138,12 +138,12 @@
                 <span class="mat-body-1">Body 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-body-1">Body 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -154,12 +154,12 @@
                 <span class="mat-body-2">Body 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-body-2">Body 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -170,12 +170,12 @@
                 <span class="mat-caption">Caption</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="mat-caption">Caption</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -192,13 +192,13 @@
                 <span class="h1">Heading 1</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h1>Heading 1</h1>
                     <span class="h1">Heading 1</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -209,13 +209,13 @@
                 <span class="h2">Heading 2</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h2>Heading 2</h2>
                     <span class="h2">Heading 2</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -226,13 +226,13 @@
                 <span class="h3">Heading 3</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h3>Heading 3</h3>
                     <span class="h3">Heading 3</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -243,13 +243,13 @@
                 <span class="h4">Heading 4</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h4>Heading 4</h4>
                     <span class="h4">Heading 4</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -260,13 +260,13 @@
                 <span class="h5">Heading 5</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h5>Heading 5</h5>
                     <span class="h5">Heading 5</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -277,13 +277,13 @@
                 <span class="h6">Heading 6</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <h6>Heading 6</h6>
                     <span class="h6">Heading 6</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/headings/headings.component.scss b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss
index 94d9b834..66ca047d 100644
--- a/src/app/main/content/ui/typography/tabs/headings/headings.component.scss
+++ b/src/app/main/content/ui/typography/tabs/headings/headings.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html
index 56cf09ac..9f7f7252 100644
--- a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html
+++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.html
@@ -13,14 +13,14 @@
                 <span class="font-weight-900">font-weight: 900</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="font-weight-100">100 font weight</span>
                     ...
                     <span class="font-weight-900">900 font weight</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -37,12 +37,12 @@
                 <span class="font-size-20">font-size: 20</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="font-size-20">font-size: 20</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -61,14 +61,14 @@
                 <span>line-height: 120</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="line-height-2">2px line height</span>
                     ...
                     <span class="line-height-120">120px line height</span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -84,12 +84,12 @@
                 <div class="text-left">Left aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-left">Left aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -99,12 +99,12 @@
                 <div class="text-center">Center aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-center">Center aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -114,12 +114,12 @@
                 <div class="text-right">Right aligned text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-right">Right aligned text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -131,14 +131,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-boxed">Boxed text</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -150,14 +150,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-boxed-light">Boxed text light</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -169,14 +169,14 @@
                 </p>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <p>
                         <span class="text-strike">Strike-through text</span>
                     </p>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -186,12 +186,12 @@
                 <div class="text-italic">Italic text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-italic">Italic text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -201,12 +201,12 @@
                 <div class="text-semibold">Semi-bold text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-semibold">Semi-bold text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -216,12 +216,12 @@
                 <div class="text-bold">Bold text</div>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <div class="text-bold">Bold text</div>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -233,14 +233,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <span class="text-truncate">
                         This is a truncated text. It will be truncated if it's too long. Vivamus convallis dui porta massa.
                     </span>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss
index 48dd1da4..faa39dc7 100644
--- a/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss
+++ b/src/app/main/content/ui/typography/tabs/helpers/helpers.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html
index 454d9343..067d9f0f 100644
--- a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html
+++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.html
@@ -8,12 +8,12 @@
                 <span><abbr title="Cascaded Style Sheet">CSS</abbr></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <abbr title="Cascaded Style Sheet">CSS</abbr>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -23,12 +23,12 @@
                 <span>This is a <mark>marked</mark> text.</span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a <mark>marked</mark> text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -40,12 +40,12 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <del>This is a deleted text.</del>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -55,12 +55,12 @@
                 <span><s>This is a strike-through text.</s></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <s>This is a strike-through text.</s>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -70,12 +70,12 @@
                 <span><u>This is an underlined text.</u></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <u>This is an underlined text.</u>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -87,12 +87,12 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <small>This is a small text.</small>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -102,12 +102,12 @@
                 <span><strong>This is a strong text.</strong></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <strong>This is a strong text.</strong>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -117,12 +117,12 @@
                 <span><em>This is an italic text.</em></span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     <em>This is an italic text.</em>
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -135,14 +135,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-super">super</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -156,14 +156,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-sub">sub</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -176,14 +176,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-capitalized">capitalized</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -196,14 +196,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is an
                     <span class="text-uppercase">uppercase</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
@@ -216,14 +216,14 @@
                 </span>
             </div>
 
-            <fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
+            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                        fxFlex="50">
                 <textarea #source hidden="hidden">
                     This is a
                     <span class="text-lowercase">LOWERCASE</span>
                     text.
                 </textarea>
-            </fuse-hljs>
+            </fuse-highlight>
 
         </div>
 
diff --git a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss
index 0445f273..81248227 100644
--- a/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss
+++ b/src/app/main/content/ui/typography/tabs/inline-text-elements/inline-text-elements.component.scss
@@ -4,7 +4,6 @@
 
         .source-code {
             position: relative;
-            background: #F3F4F6;
             margin-bottom: 24px;
             min-height: 180px;
 
diff --git a/src/app/navigation/navigation.model.ts b/src/app/navigation/navigation.model.ts
index a0029669..da8e126d 100644
--- a/src/app/navigation/navigation.model.ts
+++ b/src/app/navigation/navigation.model.ts
@@ -823,11 +823,11 @@ export class FuseNavigationModel implements FuseNavigationModelInterface
                         'url'  : '/components/countdown'
                     },
                     {
-                        'id'   : 'highlightjs',
-                        'title': 'Highlight.js',
+                        'id'   : 'highlight',
+                        'title': 'Highlight',
                         'type' : 'item',
                         'icon' : 'settings_input_component',
-                        'url'  : '/components/highlightjs'
+                        'url'  : '/components/highlight'
                     },
                     {
                         'id'   : 'material-color-picker',