Add highlight.js lib

Add highlight-directive to highlight code-blocks

Author: FawzyMokhtar

package.json

@@ -24,6 +24,7 @@
     "@types/lodash": "^4.14.136",
     "bootstrap": "^4.3.1",
     "font-awesome": "^4.7.0",
+    "highlight.js": "^9.15.9",
     "lodash": "^4.17.15",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",

src/app/shared/directives/highlight.directive.ts

@@ -0,0 +1,15 @@
+import {Directive, ElementRef, AfterViewInit} from "@angular/core";
+import hlJs from "highlight.js/lib/highlight";
+import cs from "highlight.js/lib/languages/cs";
+hlJs.registerLanguage("csharp", cs);
+
+@Directive({
+  selector: "code[appHighlight]"
+})
+export class HighlightDirective implements AfterViewInit {
+  constructor (private elRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    hlJs.highlightBlock(this.elRef.nativeElement);
+  }
+}

src/app/shared/directives/index.ts

@@ -0,0 +1,5 @@
+import {HighlightDirective} from "./highlight.directive";
+
+export const DIRECTIVES: any[] = [
+    HighlightDirective
+];

src/app/shared/shared.module.ts

@@ -4,19 +4,22 @@ import {RouterModule} from "@angular/router";
 
 import * as fromContainers from "./containers";
 import * as fromComponents from "./components";
+import * as fromDirectives from "./directives";
 
 @NgModule({
   declarations: [
     ...fromContainers.CONTAINERS,
-    ...fromComponents.COMPONENTS
+    ...fromComponents.COMPONENTS,
+    ...fromDirectives.DIRECTIVES
   ],
   imports: [
     CommonModule,
     RouterModule
   ],
   exports: [
     ...fromContainers.CONTAINERS,
-    ...fromComponents.COMPONENTS
+    ...fromComponents.COMPONENTS,
+    ...fromDirectives.DIRECTIVES
   ]
 })
 export class SharedModule {

src/app/version1.0.0/components/getting-started/getting-started.component.html

@@ -57,13 +57,8 @@ <h2>Basic guid</h2>
             <p>
                 Let's start with creating a new class called <code>Person</code>.
             </p>
-            <pre>
-                <code class="language-javascript">
-                        <!-- public class Person {
-                            public string Name {get; set;}
-                            public int Age {get; set;}
-                        } -->
-                </code>
+            <pre class="code-block">
+                <code appHighlight>{{person1}}</code>
             </pre>
         </div>
     </ng-container>

src/app/version1.0.0/components/getting-started/getting-started.component.ts

@@ -15,6 +15,14 @@ export class GettingStartedComponent implements OnInit {
   previous: IPost;
   next: IPost;
 
+  //#region Codes
+  person1 = `
+  public class Person {
+    public string Name {get; set;}
+    public int Age {get; set;}
+  }`;
+  //#endregion
+
   ngOnInit(): void {
     this.post = DocService.findPost(this.versionId, this.postId);
 

src/styles/components/_code.scss

@@ -0,0 +1,14 @@
+/* Import highlight.js style from node_modules */
+@import "highlight.js/scss/vs.scss";
+
+.code-block {
+  background-color: #f0f0f0;
+  padding: 0;
+  margin: 0;
+}
+
+.hljs {
+  padding: 0;
+  background-color: #f0f0f0;
+  display: inline;
+}

src/styles/components/_index.scss

@@ -7,6 +7,7 @@
 /* Individual Components */
 @import "anchor";
 @import "button";
+@import "code";
 
 /* Angular Components*/
 @import "post-wrapper";

yarn.lock

@@ -3017,6 +3017,11 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
+highlight.js@^9.15.9:
+  version "9.15.9"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.9.tgz#865257da1dbb4a58c4552d46c4b3854f77f0e6d5"
+  integrity sha512-M0zZvfLr5p0keDMCAhNBp03XJbKBxUx5AfyfufMdFMEP4N/Xj6dh0IqC75ys7BAzceR34NgcvXjupRVaHBPPVQ==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"