PrismJS + Custom theme for docs.

angular.json

@@ -23,11 +23,9 @@
               "src/content"
             ],
             "styles": [
-              "src/styles.scss",
-              "src/assets/third-party/highlight/styles/default.css"
+              "src/styles.scss"
             ],
             "scripts": [
-              "src/assets/third-party/highlight/highlight.pack.js",
               "node_modules/remarkable/dist/remarkable.js"
             ]
           },

package.json

@@ -28,10 +28,11 @@
     "core-js": "^2.5.7",
     "jquery": "^3.3.1",
     "popper.js": "^1.14.4",
+    "prismjs": "git+https://github.com/PrismJS/prism.git",
     "remarkable": "^1.7.1",
     "rxjs": "^6.3.3",
-    "zone.js": "^0.8.26",
-    "rxjs-compat": "^6.0.0-rc.0"
+    "rxjs-compat": "^6.0.0-rc.0",
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.8.0",

src/app/shared/highlight.service.ts

@@ -0,0 +1,31 @@
+import { Injectable, Inject } from '@angular/core';
+
+import { PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+import 'clipboard';
+
+import 'prismjs';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-sass';
+import 'prismjs/components/prism-scss';
+import 'prismjs/components/prism-yaml';
+
+declare var Prism: any;
+
+@Injectable()
+export class HighlightService {
+
+  constructor(@Inject(PLATFORM_ID) private platformId: Object) { }
+
+  highlightAll() {
+    if (isPlatformBrowser(this.platformId)) {
+      Prism.highlightAll();
+    }
+  }
+}

src/app/shared/markdown/markdown.component.ts

@@ -1,20 +1,24 @@
 import { Component, Input, ElementRef, ViewChild, EventEmitter, Output } from "@angular/core";
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
+import { HighlightService } from './../../shared/highlight.service'
+
 declare var Remarkable: any;
-declare var hljs: any;
 
 export class MarkdownReplace {
   constructor(
     public find: RegExp,
     public replace: (substring: string, ...args: any[]) => string,
     public render?: () => void
-    ) {}
+  ) { }
 }
 
 @Component({
   selector: 'markdown-component',
-  template: `<div class="markdown" [innerHtml]="htmlData"></div>`
+  template: `<div class="markdown" [innerHtml]="htmlData"></div>`,
+  providers: [
+    HighlightService
+  ]
 })
 export class MarkdownComponent {
   htmlData: SafeHtml = null;
@@ -28,11 +32,12 @@ export class MarkdownComponent {
   }
   @Output('render') renderEvent = new EventEmitter();
   get content(): string {
-      return this._content;
+    return this._content;
   }
   constructor(
-    private sanitizer: DomSanitizer
-    ){}
+    private sanitizer: DomSanitizer,
+    private highlightService: HighlightService
+  ) { }
 
   remarkable = new Remarkable({
     html: true
@@ -50,15 +55,16 @@ export class MarkdownComponent {
     // Additional Rendering
     this.replace.forEach(o => {
       if (o.render != null) {
-          o.render();
+        o.render();
       }
     });
     // Code blocks
     setTimeout(() => {
-      let items = document.querySelectorAll('pre code');
-      for (var i = 0; i < items.length; i++) {
-        hljs.highlightBlock(items[i]);
-      }
+      // let items = document.querySelectorAll('pre code');
+      // for (var i = 0; i < items.length; i++) {
+      //   hljs.highlightBlock(items[i]);
+      // }
+      this.highlightService.highlightAll();
       // Render
       this.renderEvent.emit();
     });

src/app/viewerPage/viewerPage.component.ts

@@ -10,7 +10,6 @@ import { NgbTooltipWindow } from "@ng-bootstrap/ng-bootstrap/tooltip/tooltip";
 import { MarkdownReplace } from "app/shared/markdown/markdown.component";
 
 declare var Remarkable: any;
-declare var hljs: any;
 
 @Component({
   selector: 'mdi-viewer',
@@ -39,7 +38,8 @@ export class ViewerPageComponent {
   constructor(public router: Router,
     public route: ActivatedRoute,
     private viewerService: ViewerService,
-    private iconService: IconService) {
+    private iconService: IconService
+  ) {
     this.url = route.snapshot.url.join('/');
     this.sidebar = new Sidebar(this.url, [
       new SidebarItem("home", "Loading...", "", "", "", [])
@@ -164,7 +164,7 @@ export class ViewerPageComponent {
           const tab = `<div class="card mb-3">
             <div class="card-header">
               <ul class="nav nav-tabs card-header-tabs">`;
-          const title = m1 === '' ? '' :  `<li class="nav-item-title">${m1}</li>`;
+          const title = m1 === '' ? '' : `<li class="nav-item-title">${m1}</li>`;
           return `${tab}${title}`;
         });
         markdown = markdown.replace(/tab:[^ ]+ .+(\r?\ntab:[^ ]+ .+)+/g, (m) => {
@@ -186,7 +186,7 @@ export class ViewerPageComponent {
         });
         this.markdown = markdown;
       },
-      e => this.errorMessage = e);
+        e => this.errorMessage = e);
     // Load stylesheets
     if (data.stylesheets) {
       data.stylesheets.map(s => this.addCss(s));
@@ -218,9 +218,9 @@ export class ViewerPageComponent {
   }
 
   addCss(fileName) {
-    for(var i = 0; i < document.styleSheets.length; i++){
-      if(document.styleSheets[i].href == fileName){
-          return;
+    for (var i = 0; i < document.styleSheets.length; i++) {
+      if (document.styleSheets[i].href == fileName) {
+        return;
       }
     }
     var head = document.head,