Fix markdown KaTeX rendering; syntax highlighting for code blocks

package.json

@@ -34,17 +34,19 @@
     "angular-resize-event": "^2.0.1",
     "core-js": "^2.5.4",
     "dexie": "^3.0.2",
+    "highlight.js": "^10.6.0",
     "ionic-selectable": "^4.7.1",
+    "katex": "0.12.0",
+    "marked": "1.2.5",
     "moment": "^2.24.0",
     "ng-connection-service": "^1.0.4",
+    "ngx-highlightjs": "^4.1.3",
     "ngx-markdown": "^10.1.1",
     "ngx-monaco-editor": "^9.0.0",
     "rxjs": "~6.6.3",
     "tslib": "^1.9.0",
     "uuid": "^3.4.0",
-    "zone.js": "~0.10.3",
-    "marked":  "1.2.5",
-    "katex": "0.12.0"
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/architect": "~0.801.2",

pnpm-lock.yaml

@@ -20,11 +20,13 @@ dependencies:
   angular-resize-event: 2.0.1_04f723395c0c28a9d9b8a4ace7178ad2
   core-js: 2.6.12
   dexie: 3.0.3
+  highlight.js: 10.6.0
   ionic-selectable: 4.7.1_46634835ab6708d2c756e9ce9ae2b750
   katex: 0.12.0
   marked: 1.2.5
   moment: 2.29.1
   ng-connection-service: 1.0.4_04f723395c0c28a9d9b8a4ace7178ad2
+  ngx-highlightjs: 4.1.3_09f90a3e7814a1f469988523718b5b39
   ngx-markdown: 10.1.1_e5996703888fbff2a89c70d1b5bb77a2
   ngx-monaco-editor: 9.0.0_3f948bf93b62f1ced7854ee9678c8787
   rxjs: 6.6.3
@@ -5287,6 +5289,14 @@ packages:
     dev: true
     resolution:
       integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
+  /highlight.js/10.6.0:
+    dev: false
+    resolution:
+      integrity: sha512-8mlRcn5vk/r4+QcqerapwBYTe+iPL5ih6xrNylxrnBdHQiijDETfXX7VIxC3UiCRiINBJfANBAsPzAvRQj8RpQ==
+  /highlightjs-line-numbers.js/2.8.0:
+    dev: false
+    resolution:
+      integrity: sha512-TEf1gw0c8mb8nan0QwliqS7obT4cpUd9hzsGzsZLweteNnWea/VIqy5/aQqsa5wnz9lnvmtAkS1ZtDTjB/goYQ==
   /hmac-drbg/1.0.1:
     dependencies:
       hash.js: 1.1.7
@@ -7192,6 +7202,21 @@ packages:
       '@angular/core': ^6.0.0-rc.0 || ^6.0.0
     resolution:
       integrity: sha512-WrZfK+hUzrJS77ItxXI08rUN6Av77W3+LsaJEPufyo2wRe7Tn8xG18FHHEbbgqKkJeDT/yGJBH2xOaT+1jb22g==
+  /ngx-highlightjs/4.1.3_09f90a3e7814a1f469988523718b5b39:
+    dependencies:
+      '@angular/common': 10.1.6_@angular+core@10.1.6+rxjs@6.6.3
+      '@angular/core': 10.1.6_rxjs@6.6.3+zone.js@0.10.3
+      highlight.js: 10.6.0
+      highlightjs-line-numbers.js: 2.8.0
+      rxjs: 6.6.3
+      tslib: 2.1.0
+    dev: false
+    peerDependencies:
+      '@angular/common': '>=8.0.0'
+      '@angular/core': '>=8.0.0'
+      rxjs: '>=6.0.0'
+    resolution:
+      integrity: sha512-4pVQ4EXNDjIes7u93iX5Seyzg7dZXLdw6eAMLEQnYZ/2n1s8Wb9SHS3v2dCiO1VjpVFnfWsHzKwNxgzWbIinqg==
   /ngx-markdown/10.1.1_e5996703888fbff2a89c70d1b5bb77a2:
     dependencies:
       '@angular/common': 10.1.6_@angular+core@10.1.6+rxjs@6.6.3
@@ -11197,6 +11222,7 @@ specifiers:
   codelyzer: ^5.0.0
   core-js: ^2.5.4
   dexie: ^3.0.2
+  highlight.js: ^10.6.0
   ionic-selectable: ^4.7.1
   jasmine-core: ~3.4.0
   jasmine-spec-reporter: ~4.2.1
@@ -11209,6 +11235,7 @@ specifiers:
   marked: 1.2.5
   moment: ^2.24.0
   ng-connection-service: ^1.0.4
+  ngx-highlightjs: ^4.1.3
   ngx-markdown: ^10.1.1
   ngx-monaco-editor: ^9.0.0
   protractor: ~5.4.0

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;
   }
 }