diff --git a/package-lock.json b/package-lock.json index 485922f4..7cd49ef6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -512,15 +512,6 @@ "resolved": "https://registry.npmjs.org/angular-resizable-element/-/angular-resizable-element-2.0.0.tgz", "integrity": "sha512-Jsa818fxtAtBA3Fp1u4mWV9tcpakM+bNYFFbB/AjKig2BtzZkeyLx3vjcBCfwPmXkK10kX2QKR8RDALk1w209A==" }, - "angular2-markdown": { - "version": "1.6.0", - "resolved": "https://registry.npmjs.org/angular2-markdown/-/angular2-markdown-1.6.0.tgz", - "integrity": "sha1-hja/narXD8NWMxJnB/+zPmhPurE=", - "requires": { - "marked": "0.3.9", - "prismjs": "1.9.0" - } - }, "ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", @@ -4863,11 +4854,6 @@ "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=", "dev": true }, - "highlight.js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", - "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=" - }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", @@ -6274,11 +6260,6 @@ "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=", "dev": true }, - "marked": { - "version": "0.3.9", - "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.9.tgz", - "integrity": "sha512-nW5u0dxpXxHfkHzzrveY45gCbi+R4PaO4WRZYqZNl+vB0hVGeqlFn0aOg1c8AKL63TrNFn9Bm2UP4AdiZ9TPLw==" - }, "math-expression-evaluator": { "version": "1.2.17", "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz", diff --git a/package.json b/package.json index a747c17f..2f50f7e9 100644 --- a/package.json +++ b/package.json @@ -43,12 +43,10 @@ "@types/prismjs": "1.9.0", "angular-calendar": "0.23.0", "angular-in-memory-web-api": "0.5.2", - "angular2-markdown": "1.6.0", "classlist.js": "1.1.20150312", "core-js": "2.5.3", "d3": "4.12.0", "hammerjs": "2.0.8", - "highlight.js": "9.12.0", "intl": "1.2.5", "moment": "2.20.1", "ngrx-store-freeze": "0.2.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 796b335e..2087f484 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,7 +12,6 @@ import { FuseMainModule } from './main/main.module'; import { FuseSplashScreenService } from './core/services/splash-screen.service'; import { FuseConfigService } from './core/services/config.service'; import { FuseNavigationService } from './core/components/navigation/navigation.service'; -import { MarkdownModule } from 'angular2-markdown'; import { TranslateModule } from '@ngx-translate/core'; import { AppStoreModule } from './store/store.module'; @@ -57,7 +56,6 @@ const appRoutes: Routes = [ BrowserAnimationsModule, RouterModule.forRoot(appRoutes), SharedModule, - MarkdownModule.forRoot(), TranslateModule.forRoot(), InMemoryWebApiModule.forRoot(FuseFakeDbService, { delay : 0, diff --git a/src/app/core/components/highlight/highlight.component.ts b/src/app/core/components/highlight/highlight.component.ts index 1066b449..e58be26d 100644 --- a/src/app/core/components/highlight/highlight.component.ts +++ b/src/app/core/components/highlight/highlight.component.ts @@ -1,4 +1,6 @@ import { Component, ContentChild, ElementRef, Input, OnInit } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + import * as Prism from 'prismjs/prism'; import './prism-languages'; @@ -11,25 +13,46 @@ export class FuseHighlightComponent implements OnInit { @ContentChild('source') source: ElementRef; @Input('lang') lang: string; + @Input('path') path: string; constructor( - private elementRef: ElementRef + private elementRef: ElementRef, + private http: HttpClient ) { - } ngOnInit() { - const originalSource = this.source.nativeElement.value; - - if ( !originalSource || !this.lang ) + // If there is no language defined, return... + if ( !this.lang ) { return; } + // If the path is defined... + if ( this.path ) + { + // Get the source + this.http.get(this.path, {responseType: 'text'}).subscribe((response) => { + + // Highlight it + this.highlight(response); + }); + } + + // If the path is not defined and the source element exists... + if ( !this.path && this.source ) + { + // Highlight it + this.highlight(this.source.nativeElement.value); + } + } + + highlight(sourceCode) + { // Split the source into lines - const sourceLines = originalSource.split('\n'); + const sourceLines = sourceCode.split('\n'); // Remove the first and the last line of the source // code if they are blank lines. This way, the html @@ -73,6 +96,7 @@ export class FuseHighlightComponent implements OnInit // Replace the innerHTML of the component with the highlighted code this.elementRef.nativeElement.innerHTML = '
' + highlightedCode + '
'; + } } diff --git a/src/app/core/modules/shared.module.ts b/src/app/core/modules/shared.module.ts index 168a0c4b..f0ab802f 100644 --- a/src/app/core/modules/shared.module.ts +++ b/src/app/core/modules/shared.module.ts @@ -21,7 +21,6 @@ import { FuseIfOnDomDirective } from '../directives/fuse-if-on-dom/fuse-if-on-do import { FuseMaterialColorPickerComponent } from '../components/material-color-picker/material-color-picker.component'; import { FuseTranslationLoaderService } from '../services/translation-loader.service'; import { CookieService } from 'ngx-cookie-service'; -import { MarkdownModule } from 'angular2-markdown'; import { TranslateModule } from '@ngx-translate/core'; @NgModule({ @@ -44,8 +43,7 @@ import { TranslateModule } from '@ngx-translate/core'; ReactiveFormsModule, ColorPickerModule, NgxDnDModule, - NgxDatatableModule, - MarkdownModule + NgxDatatableModule ], exports : [ FlexLayoutModule, @@ -64,7 +62,6 @@ import { TranslateModule } from '@ngx-translate/core'; NgxDatatableModule, FuseIfOnDomDirective, FuseMaterialColorPickerComponent, - MarkdownModule, TranslateModule ], entryComponents: [ diff --git a/src/app/core/scss/partials/plugins/_prism.scss b/src/app/core/scss/partials/plugins/_prism.scss index 276ee250..9502fa8f 100644 --- a/src/app/core/scss/partials/plugins/_prism.scss +++ b/src/app/core/scss/partials/plugins/_prism.scss @@ -2,7 +2,7 @@ $base00: #263238; $base01: #2C393F; -$base02: #4A5A62; +$base02: #62727A; $base03: #707880; $base04: #C9CCD3; $base05: #CDD3DE; diff --git a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html index dfbc59dc..ddb89c69 100644 --- a/src/app/main/content/components/angular-material/example-viewer/example-viewer.html +++ b/src/app/main/content/components/angular-material/example-viewer/example-viewer.html @@ -7,9 +7,11 @@ @@ -23,29 +25,40 @@
-
+
-
+ +
-
+ +
-
+ +
-
+ +
-
+ +
diff --git a/src/app/main/content/components/highlight/highlight.component.html b/src/app/main/content/components/highlight/highlight.component.html index 1b6c8315..175abdb0 100644 --- a/src/app/main/content/components/highlight/highlight.component.html +++ b/src/app/main/content/components/highlight/highlight.component.html @@ -61,7 +61,7 @@

lang - Language of the code to be highlighted. All highlight.js languages can be used. + Language of the code to be highlighted.