From 98737cf72ddf02303602e53ceb5fbf37da6b546b Mon Sep 17 00:00:00 2001 From: Mathieu Lajoie Date: Wed, 19 Jun 2019 13:23:34 -0400 Subject: [PATCH] fixed highlighting (#955) --- docs/app/app.module.ts | 15 ++++++++++++++- .../breadcrumb/breadcrumb-docs.component.html | 1 - .../code-example/code-example.component.html | 2 +- .../code-example/code-example.component.ts | 8 ++++++++ docs/app/documentation/documentation.module.ts | 17 ++++------------- docs/styles.scss | 17 ++++++++++++++--- package-lock.json | 5 ----- package.json | 1 - 8 files changed, 41 insertions(+), 25 deletions(-) diff --git a/docs/app/app.module.ts b/docs/app/app.module.ts index 3c52dfacd06..ddb6b43555c 100644 --- a/docs/app/app.module.ts +++ b/docs/app/app.module.ts @@ -5,6 +5,18 @@ import { MarkdownModule } from 'ngx-markdown'; import { AppComponent } from './app.component'; import { HttpClientModule, HttpClient } from '@angular/common/http'; +import { HighlightModule } from 'ngx-highlightjs'; +import scss from 'highlight.js/lib/languages/scss'; +import typescript from 'highlight.js/lib/languages/typescript'; +import xml from 'highlight.js/lib/languages/xml'; + +export function hljsLanguages() { + return [ + {name: 'typescript', func: typescript}, + {name: 'scss', func: scss}, + {name: 'html', func: xml}, + ]; +} const routes: Routes = [ { path: '', loadChildren: './documentation/documentation.module#DocumentationModule' }, @@ -17,7 +29,8 @@ const routes: Routes = [ BrowserAnimationsModule, RouterModule.forRoot(routes), HttpClientModule, - MarkdownModule.forRoot({ loader: HttpClient }) + MarkdownModule.forRoot({ loader: HttpClient }), + HighlightModule.forRoot({ languages: hljsLanguages }) ], bootstrap: [AppComponent], entryComponents: [] diff --git a/docs/app/documentation/component-docs/breadcrumb/breadcrumb-docs.component.html b/docs/app/documentation/component-docs/breadcrumb/breadcrumb-docs.component.html index 8712cd151b3..f416eec817a 100644 --- a/docs/app/documentation/component-docs/breadcrumb/breadcrumb-docs.component.html +++ b/docs/app/documentation/component-docs/breadcrumb/breadcrumb-docs.component.html @@ -10,5 +10,4 @@

An example using href

-
diff --git a/docs/app/documentation/core-helpers/code-example/code-example.component.html b/docs/app/documentation/core-helpers/code-example/code-example.component.html index 977380ad25d..67423e12f8e 100644 --- a/docs/app/documentation/core-helpers/code-example/code-example.component.html +++ b/docs/app/documentation/core-helpers/code-example/code-example.component.html @@ -7,7 +7,7 @@ [title]="'Copy example to clipboard'"> 
-        
+
diff --git a/docs/app/documentation/core-helpers/code-example/code-example.component.ts b/docs/app/documentation/core-helpers/code-example/code-example.component.ts index a46ea764b4c..b4ce2a798bf 100644 --- a/docs/app/documentation/core-helpers/code-example/code-example.component.ts +++ b/docs/app/documentation/core-helpers/code-example/code-example.component.ts @@ -7,7 +7,15 @@ import { CopyService } from '../../services/copy.service'; styleUrls: ['./code-example.component.scss'] }) export class CodeExampleComponent implements OnInit { + + /** + * Code to highlight. + */ @Input() code: string; + + /** + * Language to limit the auto-detection to. + */ @Input() language: string; smallScreen: boolean; diff --git a/docs/app/documentation/documentation.module.ts b/docs/app/documentation/documentation.module.ts index 71335e37705..2f409bd88c2 100644 --- a/docs/app/documentation/documentation.module.ts +++ b/docs/app/documentation/documentation.module.ts @@ -202,8 +202,7 @@ import { TimePickerDisabledExampleComponent, TimePickerNoSecondsExampleComponent, TimePickerCompactExampleComponent, - TimePickerAllowNullExampleComponent, - + TimePickerAllowNullExampleComponent } from './component-docs/time-picker/examples/time-picker-examples.component'; import { TimePickerFormExampleComponent } from './component-docs/time-picker/examples/time-picker-form-example.component'; import { ToggleDocsComponent } from './component-docs/toggle/toggle-docs.component'; @@ -258,8 +257,6 @@ import { NewComponentComponent } from './component-docs/new-component/new-compon import { COMPONENT_SCHEMAS } from './component-docs/schemas'; -import * as hljs from 'highlight.js'; -import { HighlightJsModule, HIGHLIGHT_JS } from 'angular-highlight-js'; import { BackdropExamplesComponent } from './component-docs/modal/examples/backdrop-examples/backdrop-examples.component'; import { PopoverPlacementExampleComponent } from './component-docs/popover/examples/popover-placement/popover-placement-example.component'; import { HttpClientModule } from '@angular/common/http'; @@ -325,10 +322,7 @@ import { TableResponsiveExampleComponent } from './component-docs/table/examples import { DatePickerPositionExampleComponent } from './component-docs/date-picker/examples/date-picker-position-example.component'; import { TimePickerOtherDelimiterExampleComponent } from './component-docs/time-picker/examples/time-picker-other-delimiter-example.component'; import { DatetimeFormatExampleComponent } from './component-docs/datetime-picker/examples/datetime-format-example/datetime-format-example.component'; - -export function highlightJsFactory() { - return hljs; -} +import { HighlightModule } from 'ngx-highlightjs'; @NgModule({ declarations: [ @@ -596,10 +590,6 @@ export function highlightJsFactory() { ], entryComponents: [ModalContentComponent, ModalInModalComponent, ModalInModalSecondComponent, AlertContentComponent], imports: [ - HighlightJsModule.forRoot({ - provide: HIGHLIGHT_JS, - useFactory: highlightJsFactory - }), MarkdownModule.forChild(), CommonModule, FormsModule, @@ -609,7 +599,8 @@ export function highlightJsFactory() { FundamentalNgxModule, HttpClientModule, CdkTableModule, - DragDropModule + DragDropModule, + HighlightModule ], providers: [ CopyService, diff --git a/docs/styles.scss b/docs/styles.scss index 92f01edf9d3..b7746e29966 100644 --- a/docs/styles.scss +++ b/docs/styles.scss @@ -158,19 +158,30 @@ pre { } //highlight overrides -.hljs-tag { +.hljs-tag, .hljs-name { color: #000080; } -.hljs-name { - color: #000080; + +.hljs-keyword { + color: #00f; +} + +.hljs-comment { + color: #008000; } + .hljs-attr { color: #008080; } + .hljs-string { color: #d14; } +.hljs-meta { + color: #2b91af +} + .side-nav__search { padding: 10px 10px 0 10px; } diff --git a/package-lock.json b/package-lock.json index a5c6a169057..9677d5b33bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1282,11 +1282,6 @@ } } }, - "angular-highlight-js": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/angular-highlight-js/-/angular-highlight-js-2.0.1.tgz", - "integrity": "sha512-DZSPnIE+Zps1FUSCe2e7rFhyeZBABK42rsf+veg4TKMW61PoVZpoti6C2BgEK2ArlFaleQp0RgVrl/P3sbWhXQ==" - }, "ansi-align": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ansi-align/-/ansi-align-2.0.0.tgz", diff --git a/package.json b/package.json index f6c20675447..69033af3c07 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,6 @@ "@angular/platform-browser-dynamic": "^7.2.7", "@angular/router": "^7.2.7", "@types/node": "^12.0.8", - "angular-highlight-js": "^2.0.1", "core-js": "^2.6.9", "focus-trap": "^5.0.1", "fundamental-styles": "^0.1.0",