From b39cab61a86bee2810d9990ba23c27965dc10336 Mon Sep 17 00:00:00 2001 From: garrettmills Date: Thu, 11 Mar 2021 11:09:48 -0600 Subject: [PATCH] Fix markdown KaTeX rendering; syntax highlighting for code blocks --- package.json | 8 +++-- pnpm-lock.yaml | 27 ++++++++++++++++ src/app/app.module.ts | 31 +++++++++++++++++-- .../nodes/markdown/markdown.component.html | 2 +- .../nodes/markdown/markdown.component.ts | 8 +++++ src/global.scss | 5 +-- 6 files changed, 72 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 55a5c19..992036d 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f8f06d7..3ee0cc2 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d6bb3cb..08dcd34 100644 --- a/src/app/app.module.ts +++ b/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 `` 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] }) diff --git a/src/app/components/nodes/markdown/markdown.component.html b/src/app/components/nodes/markdown/markdown.component.html index fa347f8..cf6ce2e 100644 --- a/src/app/components/nodes/markdown/markdown.component.html +++ b/src/app/components/nodes/markdown/markdown.component.html @@ -8,5 +8,5 @@ #editor > -
+
\ No newline at end of file diff --git a/src/app/components/nodes/markdown/markdown.component.ts b/src/app/components/nodes/markdown/markdown.component.ts index 00bae81..6ce51d9 100644 --- a/src/app/components/nodes/markdown/markdown.component.ts +++ b/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...'; diff --git a/src/global.scss b/src/global.scss index c371c94..81fe750 100644 --- a/src/global.scss +++ b/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; } }