Fix markdown KaTeX rendering; syntax highlighting for code blocks

src/app/app.module.ts

@@ -14,12 +14,14 @@ import { TreeModule } from '@circlon/angular-tree-component';
 import {AgGridModule} from 'ag-grid-angular';
 import {MonacoEditorModule} from 'ngx-monaco-editor';
 import { APP_BASE_HREF, PlatformLocation } from '@angular/common';
-import { MarkdownModule } from 'ngx-markdown';
+import {MarkdownModule, MarkedOptions} from 'ngx-markdown';
 import {ConnectionServiceModule} from 'ng-connection-service';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { environment } from '../environments/environment';
 import { AngularResizedEventModule } from 'angular-resize-event';
 import { IonicSelectableModule } from 'ionic-selectable';
+import * as hljs from 'highlight.js';
+import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 
 /**
  * This function is used internal to get a string instance of the `<base href="" />` value from `index.html`.
@@ -48,7 +50,24 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     TreeModule,
     AgGridModule.withComponents([]),
     MonacoEditorModule.forRoot(),
-    MarkdownModule.forRoot(),
+    HighlightModule,
+    MarkdownModule.forRoot({
+      markedOptions: {
+        provide: MarkedOptions,
+        useValue: {
+          highlight(code: string, lang: string, callback?: (error: any, code: string) => void): string {
+            const highlighted = hljs.highlight(lang, code, true);
+            console.log('highlighed', highlighted);
+
+            if ( callback ) {
+              callback(null, highlighted.value);
+            }
+
+            return highlighted.value;
+          },
+        },
+      }
+    }),
     ConnectionServiceModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     AngularResizedEventModule,
@@ -62,7 +81,13 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
       provide: APP_BASE_HREF,
       useFactory: getBaseHref,
       deps: [PlatformLocation]
-    }
+    },
+    {
+      provide: HIGHLIGHT_OPTIONS,
+      useValue: {
+        fullLibraryLoader: () => import('highlight.js'),
+      }
+    },
   ],
   bootstrap: [AppComponent]
 })

src/app/components/nodes/markdown/markdown.component.html

@@ -8,5 +8,5 @@
             #editor
         ></ngx-monaco-editor>
     </div>
-    <div class="display markdown-display" markdown katex [data]="contents" *ngIf="!showEditor || (showEditor && !singleColumn)"></div>
+    <div class="display markdown-display" markdown katex [katexOptions]="katexOptions" [data]="contents" *ngIf="!showEditor || (showEditor && !singleColumn)"></div>
 </div>

src/app/components/nodes/markdown/markdown.component.ts

@@ -3,6 +3,8 @@ import {EditorNodeContract} from '../EditorNode.contract';
 import {EditorService} from '../../../service/editor.service';
 import {v4} from 'uuid';
 import {EditorComponent} from 'ngx-monaco-editor';
+import {KatexOptions, MarkedOptions} from 'ngx-markdown';
+import * as hljs from 'highlight.js';
 
 @Component({
     selector: 'editor-markdown',
@@ -16,6 +18,12 @@ export class MarkdownComponent extends EditorNodeContract implements OnInit {
     @ViewChild('editor') editor: EditorComponent;
     @ViewChild('editorContainer') editorContainer: ElementRef;
 
+    public readonly katexOptions: KatexOptions = {
+        // displayMode: true,
+        // @ts-ignore
+        output: 'mathml',
+    };
+
     // public isFocused = false;
     public initialValue = 'Double-click to edit...';
     protected savedValue = 'Double-click to edit...';

src/global.scss

@@ -31,6 +31,7 @@
 @import "~ag-grid-community/dist/styles/ag-theme-balham-dark.css";
 @import "~@fortawesome/fontawesome-free/css/all.min.css";
 @import "~@fortawesome/fontawesome-free/css/brands.min.css";
+@import '~highlight.js/styles/androidstudio.css';
 
 :root {
   --noded-background-note: #3A86FF;
@@ -148,11 +149,11 @@ hr {
   }
 
   code {
-    color: #ea4894;
+    color: #ccc;
   }
 
   pre {
-    background: #fff9ff;
+    background: #353535;
     padding: 10px;
   }
 }