added highlight.js

btroncone · btroncone · commit bfb948e76758 · 2017-10-08T11:51:23.000-04:00
diff --git a/ngsw-manifest.json b/ngsw-manifest.json
@@ -4,7 +4,10 @@
       {"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},
       {"url": "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"},
       {"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},
-      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"},
+      {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/typescript.min.js"}
     ]
   }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 class Menu {
   title: string;
   link: string;
-  options: { exact: boolean }; 
+  options: { exact: boolean };
 }
 
 @Component({
@@ -13,25 +13,25 @@ class Menu {
 })
 export class AppComponent {
   menus: Menu[] = [
-    { 
+    {
       title: 'Home',
       link: '/',
       options: { exact: true }
     },
-    { 
+    {
       title: 'Operators',
       link: '/operators',
       options: { exact: false }
     },
-    { 
+    {
       title: 'Companies',
       link: '/companies',
       options: { exact: false }
     },
-    { 
+    {
       title: 'Team',
       link: '/team',
       options: { exact: false }
     }
-  ]
+  ];
 }
diff --git a/src/app/operators/directives/highlight-js.directive.ts b/src/app/operators/directives/highlight-js.directive.ts
@@ -0,0 +1,32 @@
+import { Directive, ElementRef, Input, OnInit, AfterViewChecked, NgZone } from '@angular/core';
+
+declare var hljs: any;
+
+/*
+ *  Modified from Angular2 Highlight Package
+ *  (https://github.com/jaychase/angular2-highlight-js)
+ */
+@Directive({
+    selector: '[appHighlightJs]'
+})
+export class HighlightJsDirective implements AfterViewChecked {
+    private _done: boolean;
+
+    constructor(
+      private elementRef: ElementRef,
+      private zone: NgZone) {}
+
+    ngAfterViewChecked() {
+        if (!this._done) {
+            if (this.elementRef.nativeElement.innerHTML && this.elementRef.nativeElement.querySelector) {
+                const snippets = this.elementRef.nativeElement.querySelectorAll('code');
+                this.zone.runOutsideAngular(() => {
+                    for (const snippet of snippets) {
+                        hljs.highlightBlock(snippet);
+                    }
+                });
+                this._done = true;
+            }
+        }
+    }
+}
diff --git a/src/app/operators/directives/operator-scroll.directive.ts b/src/app/operators/directives/operator-scroll.directive.ts
diff --git a/src/app/operators/operators.module.ts b/src/app/operators/operators.module.ts
@@ -7,7 +7,8 @@ import { OperatorsComponent } from './operators.component';
 import { OperatorComponent } from './operator/operator.component';
 import { OperatorHeaderComponent } from './operator/operator-header/operator-header.component';
 
-import { OperatorScrollDirective } from './operator-scroll.directive';
+import { OperatorScrollDirective } from './directives/operator-scroll.directive';
+import { HighlightJsDirective } from './directives/highlight-js.directive';
 
 const OPERATOR_ROUTES = [
   {
diff --git a/src/index.html b/src/index.html
@@ -11,10 +11,13 @@
   <link rel="manifest" href="manifest.json">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css" rel="stylesheet">
 </head>
 <body>
   <app-root></app-root>
   <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/typescript.min.js"></script>
 </body>
 </html>

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,10 @@`
`4`	`4`	`{"url": "https://fonts.googleapis.com/icon?family=Material+Icons"},`
`5`	`5`	`{"url": "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"},`
`6`	`6`	`{"url": "https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"},`
`7`		`- {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"}`
	`7`	`+ {"url": "https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"},`
	`8`	`+ {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/styles/monokai_sublime.min.css"},`
	`9`	`+ {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/highlight.min.js"},`
	`10`	`+ {"url": "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.5.0/languages/typescript.min.js"}`
`8`	`11`	`]`
`9`	`12`	`}`
`10`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,8 @@ import { OperatorsComponent } from './operators.component';`
`7`	`7`	`import { OperatorComponent } from './operator/operator.component';`
`8`	`8`	`import { OperatorHeaderComponent } from './operator/operator-header/operator-header.component';`
`9`	`9`
`10`		`-import { OperatorScrollDirective } from './operator-scroll.directive';`
	`10`	`+import { OperatorScrollDirective } from './directives/operator-scroll.directive';`
	`11`	`+import { HighlightJsDirective } from './directives/highlight-js.directive';`
`11`	`12`
`12`	`13`	`const OPERATOR_ROUTES = [`
`13`	`14`	`{`