diff --git a/frontend/angular.json b/frontend/angular.json index b53f2798..eb4f111d 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -23,14 +23,14 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", - "allowedCommonJsDependencies": ["chart.js"], + "allowedCommonJsDependencies": ["chart.js", "highlight.js"], "aot": true, "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ - "src/styles.scss", + "src/styles.scss" ], "scripts": [ "node_modules/@panva/oauth4webapi/build/index.js" diff --git a/frontend/package.json b/frontend/package.json index 7ec96b3a..2e484c18 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -36,6 +36,7 @@ "moment": "^2.29.4", "ng2-charts": "^2.3.0", "ngx-dropzone": "^3.1.0", + "ngx-highlightjs": "^7.0.1", "rxjs": "~6.5.4", "tslib": "^2.0.0", "zone.js": "~0.11.8" diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index cb22a577..69750f37 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -24,6 +24,7 @@ import {FastenApiService} from './services/fasten-api.service'; import {Router} from '@angular/router'; import { SourceDetailComponent } from './pages/source-detail/source-detail.component'; import {ResourceListComponent} from './components/resource-list/resource-list.component'; +import { HighlightModule, HIGHLIGHT_OPTIONS } from 'ngx-highlightjs'; @NgModule({ declarations: [ @@ -46,7 +47,8 @@ import {ResourceListComponent} from './components/resource-list/resource-list.co HttpClientModule, NgbModule, ChartsModule, - NgxDropzoneModule + NgxDropzoneModule, + HighlightModule ], providers: [ { @@ -55,7 +57,17 @@ import {ResourceListComponent} from './components/resource-list/resource-list.co multi: true, deps: [FastenApiService, Router] }, - CanActivateAuthGuard + CanActivateAuthGuard, + { + provide: HIGHLIGHT_OPTIONS, + useValue: { + coreLibraryLoader: () => import('highlight.js/lib/core'), + lineNumbersLoader: () => import('highlightjs-line-numbers.js'), // Optional, only if you want the line numbers + languages: { + json: () => import('highlight.js/lib/languages/json') + }, + } + } ], bootstrap: [AppComponent] }) diff --git a/frontend/src/app/pages/resource-detail/resource-detail.component.html b/frontend/src/app/pages/resource-detail/resource-detail.component.html index d6df9640..2f69403e 100644 --- a/frontend/src/app/pages/resource-detail/resource-detail.component.html +++ b/frontend/src/app/pages/resource-detail/resource-detail.component.html @@ -1,6 +1,7 @@